美文网首页
VUE条件渲染

VUE条件渲染

作者: 陈老板_ | 来源:发表于2018-06-13 22:05 被阅读6次

条件渲染指令:
v-if v-else v-show
如果频繁切换 v-show比较好
v-if v-else会干掉元素 v-show则是通过style隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        <p v-if="ok">成功了</p>
        <p v-else>失败</p>

        <p v-show="ok">表白成功</p>
        <p v-show="!ok">表白失败</p>

        <button @click="ok=!ok">切换</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            ok: false
        }
    })
</script>
</html>

相关文章

  • 2019-03-09 Vue基础知识

    Vue2.x 模板语法,条件渲染,列表渲染渲染 Vue2.x Router,Vuex 集成Vue2.x Vue2....

  • vue中的条件渲染例子

    vue中的条件渲染例子

  • Vue.js - Vue 中的条件渲染

    Vue 中的条件渲染 今天说一下 Vue 中的条件渲染,通俗的说就是条件判断,判断各种条件是否执行。 新建一个最简...

  • VUE条件渲染

    条件渲染指令:v-if v-else v-show如果频繁切换 v-show比较好v-if v-else会干...

  • Vue条件渲染

    Vue 条件渲染 v-if v-else-if v-else v-else-if 必须跟在 v-if 后面,v-e...

  • Vue条件渲染

    v-if 在字符串模板中,比如 Handlebars,我们得像这样写一个条件块: 在 Vue 中,我们使用 v-i...

  • vue 条件渲染

    v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: 在 Vue.js ,我们使用 v...

  • Vue条件渲染

    v-if (切换时会移除相关的DOM元素) v-show (切换时将 元素display属性设置为none) 如果...

  • Vue 条件渲染

    v-if 指令的使用 在Vue中,v-if 指令可以用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 tr...

  • Vue条件渲染

    列表渲染 获取索引

网友评论

      本文标题:VUE条件渲染

      本文链接:https://www.haomeiwen.com/subject/hfojeftx.html