简简单单介绍一下vue的条件渲染

条件渲染

1、v-if

v-if指令就是插入节点或删除节点

1.1、在 <template> 中配合 v-if 条件渲染一整组

【案例】将下面3个以整组的形式显示出来

<div id="app">

    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            ok:true
        }
    })
</script>
打印结果：ok值为true全部显示 ok值为false不显示

1.2、v-else 和 v-else-if

v-if指令可以和v-esle连写

【案例】

 <div id="app">
    <h1 v-if="ok">YES</h1>
    <h1 v-else>NO</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            ok:false
        }
    })
</script>
打印结果：ok值为true显示YES ok值为false显示NO

1.4、用 key 管理可复用的元素

以下示例说明示例中的2个两个模板使用了相同的元素，如果我们不想让他们重复使用，只需添加一个具有唯一值的 key 属性即可

【案例】

<div id="app">
    <template v-if="loginType === 'username'">
        <label>用户名</label>
        <input placeholder="我是用户名">
        </template>
        <template v-else>
        <label>邮&nbsp箱</label>
        <input placeholder="我是邮箱">
    </template>
    <input type="button" @click = "qiehuan" value="切换"/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            loginType:'email'
        },
        methods:{
            qiehuan:function(){
                if(this.loginType == "username"){
                    this.loginType = "email"
                }else{
                    this.loginType = "username"
                }
            }
        }
    })
</script>

我们在不加key属性得情况下在重复使用，点击按钮时看控制文字是高亮的部分就说明input在重复使用

当我们用key属性后，将不重复使用，点击按钮时看到控制台input是高亮的部分就说明不在重复使用

2、v-show

说白了v-show 就是简单地切换元素的 CSS 属性 display

v-show 不支持 < template > 语法，也不支持 v-else

当模板属性为true的时候控制台显示为display：block。属性值为false的时候控制台显示display: none

3、v-if vs v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

4、v-if与v-for一起用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的 一些 项渲染节点时，这种优先级的机制会十分有用

<div id="app">
    <ul>
        <li v-for="item in todo" v-if="item.ok">{{item.text}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            todo:[
                {text:"吃饭",ok:true},
                {text:"睡觉",ok:true},
                {text:"打豆豆",ok:true},
            ]
        }
    })
</script>
打印结果为：吃饭，睡觉，打豆豆
如果我们将打豆豆的ok值改为false的时候
打印结果为：吃饭，睡觉

我们的这个例子是先进行 v-for 的渲染，然后在进行 v-if 的渲染。

如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素

<div id="app">
    <ul v-if="ok">
        <li v-for="item in todo" >{{item.text}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            ok:true,
            todo:[
                {text:"吃饭"},
                {text:"睡觉"},
                {text:"打豆豆"},
            ]
        }
    })
</script>
打印结果为：吃饭，睡觉，打豆豆
如果我们将ok值改为false的时候
打印结果为：什么都不显示

我们的这个例子是先进行 v-if 的渲染，然后在进行 v-for 的渲染。

以上就时条件渲染的简单介绍

喜欢的朋友可以点击加收藏