2020-09-29 vue学习笔记——条件渲染

1、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<div id="app">
	<h1 v-if="ok">Yes</h1>
</div>

这里的ok为true，yes才能被渲染

var vm = new Vue({
				el:"#app",
				data:{
					ok:true
				},
			})

运行结果：

若把ok:true改为ok:false，则Yes不会在页面上显示出来

2、 在template元素上使用 v-if 条件渲染分组

**因为 v-if 是一个指令，所以必须将它添加到一个元素上。**但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。

<template v-if="ok">
       <div>hello</div>
       <div>wrold</div>
       <div>nice to meet you</div>
</template>

var vm = new Vue({
        el: '#app',
        data:{
            ok:true
        }
    });

3、v-else

<div id="app">
	<h1 v-if="grade>=90">优秀</h1>
	<h1 v-if="grade>=60">及格</h1>
	<h1 v-else>不及格</h1>
</div>

var vm = new Vue({
				el:"#app",
				data:{
					ok:true,
					grade:60
				},
			})

与JavaScript的条件语句实现的效果相同，根据grade的值来印出不同的结果。

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

ue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<div id="app">

    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>

    <input type="button" @click="qiehuan" value="切换"/>

</div>

var vm = new Vue({
        el: '#app',
        data:{
            loginType:'email'
        },
        methods:{
            qiehuan:function(){
                if(this.loginType=="email"){
                    this.loginType="username"
                }else{
                     this.loginType="email"
                }
            }
        }
    });

在上述代码中，v-if指令的删除和插入节点效率较慢.当loginType="username"变为loginType="email"时，v-if不会直接删除第一个temple节点再插入第二个temple节点，而是直接切换到第二个temple节点，并直接引用第一个temple节点中的内容。

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

<div id="app">

    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="a">
    </template>
    
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="b">
    </template>

    <input type="button" @click="qiehuan" value="切换"/>

</div>

5、v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致与v-if一样

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>

var vm = new Vue({
    el: '#app',
    data:{
       ok:false
    }
});

不同的是，当v-show的属性改为false时，它依然会在DOM中，只是不显示在页面当中，可以理解为v-show是简单的切换display。
注意：v-show 不支持 <template> 元素，也不支持 v-else。

v-if与v-show的区别：（摘自vue官网）

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

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

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

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

6、v-if与v-for一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

<div id="app">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>

var vm = new Vue({
        el: '#app',
        data:{
           items:[
               {text:"chifan",isOk:true},
               {text:"shuijiao",isOk:true},
               {text:"kandianshi",isOk:true},
               {text:"watch tv",isOk:true},
               {text:"kandianying",isOk:false},
           ]
        }
    });

运行结果：

在li标签中添加v-if指令：

<div id="app">
    <ul>
        <li v-for="item in items" v-if="item.isOk">{{item.text}}</li>
        //当v-for与v-if一起使用时优先执行v-for
    </ul>
</div>

运行结果

当v-for与v-if一起使用时优先执行v-for，这样再过滤节点时将十分有用。

当v-if在外层，且isOk:true为false时。所有数据都不会被渲染

<div id="app">
    <ul v-if="isOk">
    //这里的v-if在外层
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>

最后

以上就是纯真小馒头为你收集整理的2020-09-29 vue学习笔记——条件渲染的全部内容，希望文章能够帮你解决2020-09-29 vue学习笔记——条件渲染所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。