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

134 阅读 0 评论 89 点赞

我是靠谱客的博主纯真小馒头，这篇文章主要介绍2020-09-29 vue学习笔记——条件渲染，现在分享给大家，希望可以做个参考。

1、v-if

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

复制代码

1
2
3
4
<div id="app">
	<h1 v-if="ok">Yes</h1>
</div>

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

复制代码

1
2
3
4
5
6
7
var vm = new Vue({
				el:"#app",
				data:{
					ok:true
				},
			})

运行结果：

在这里插入图片描述
若把ok:true改为ok:false，则Yes不会在页面上显示出来

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

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

复制代码

1
2
3
4
5
6
<template v-if="ok">
       <div>hello</div>
       <div>wrold</div>
       <div>nice to meet you</div>
</template>

复制代码

1
2
3
4
5
6
7
var vm = new Vue({
        el: '#app',
        data:{
            ok:true
        }
    });

3、v-else

复制代码

1
2
3
4
5
6
<div id="app">
	<h1 v-if="grade>=90">优秀</h1>
	<h1 v-if="grade>=60">及格</h1>
	<h1 v-else>不及格</h1>
</div>

复制代码

1
2
3
4
5
6
7
8
var vm = new Vue({
				el:"#app",
				data:{
					ok:true,
					grade:60
				},
			})

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

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 即可：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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一样

复制代码

1
2
3
4
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>

复制代码

1
2
3
4
5
6
7
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 更高的优先级。

复制代码

1
2
3
4
5
6
<div id="app">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
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指令：

复制代码

1
2
3
4
5
6
7
<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时。所有数据都不会被渲染

复制代码

1
2
3
4
5
6
7
<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.js
浏览次数：134 次浏览
发布日期：2024-01-09 19:01:11
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogfy_12__23__10_x.html

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

1、v-if

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

3、v-else

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

5、v-show

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

最后

评论列表共有 0 条评论

发表评论取消回复

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

1、v-if

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

3、v-else

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

5、v-show

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

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

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

发表评论取消回复