条件渲染
v-show
- 相当于设置元素
display: none
。就是说,不论是否显示,浏览器都会渲染。适用于切换频率较高的场合 v-show
不支持与<template>
标签元素一起使用
<div id="app">
<p v-show="show">v-show 的使用</p>
<!-- 属性值可以是 JS 表达式,但返回的必须是布尔值 -->
<p v-show="2 == 2">v-show 的使用</p>
</div>
let vm = new Vue({
el: "#app",
data: { show: true }
});
v-if
v-if
、v-else-if
、v-else
- 不显示的话,浏览器则不渲染。适用于切换频率低的场合
<p v-if='vIf'>通过</p>
<p v-else>不通过</p>
let vm = new Vue({
el: "#app",
data: { vIf: true }
});
当然,属性值也可以是 JS 表达式:
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80 && score < 90">良好</p>
<p v-else-if="score >= 60 && score < 80">及格</p>
<p v-else>不及格</p>
let app = new Vue({
el: "#app",
data: { score: 100 },
});
注意:v-if
、v-else-if
、v-else
必须顺序使用,中间不可插入其他标签!否则后面的 v-else-if
/ v-else
都不会奏效!
template
如果我们需要一次性 [隐藏] / [显示] 多个标签,我们可以使用 v-if
配合 template
标签使用
注意:v-show
不能配合 template
标签使用
<div id="app">
<template v-if="isShow">
<div>里面有很多个标签</div>
<div>里面有很多个标签</div>
<div>里面有很多个标签</div>
</template>
</div>
let vm = new Vue({
name: "Demo",
el: "#app",
data: { isShow: false },
})
v-if
vs v-show
- 在切换过程中,
v-if
条件块内的事件监听器和子组件会适当地被销毁和重建
v-if
是惰性的,需要显示时 才会渲染条件块;一直不显示,则一直不渲染 - 相比之下,
v-show
就简单得多 —— 不管是否需要显示,元素总是会被渲染,并且只是简单地基于 CSS 进行切换 - 一般来说,
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销
因此,如果需要非常频繁地切换,则使用v-show
较好;如果在显示条件基本不变,则使用v-if
较好 template
只能配合v-if
使用,不能配合v-show
使用
key 值
Vue 会尽可能地复用已有元素,而不是从头开始渲染
<button @click="loginType = !loginType"> 切换 loginType </button>
<template v-if="loginType">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
let vm = new Vue({
el: "#app",
data: { loginType: true }
});
我们先在输入框中输入一些信息,然后点击 [切换 loginType]。可以发现,输入框的内容没有被清空。
因为两个模板使用了相同的元素,<input>
标签元素不会被替换掉 —— 仅仅是替换了它的 placeholder
文本
如果我们想阻止复用,重新渲染元素,我们可以给需要的标签设置 key
属性,属性值为该标签的唯一标识
注意:key
值的类型只能是 number / string
<template v-if="loginType">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
现在,每次切换时,输入框都将被重新渲染。
注意,此时 <label>
元素仍会被高效地复用,因为它们没有设置 key
属性(只重新渲染了里面的文本,因为文本不一样)
列表渲染
数据的显示
- 遍历对象:
v-for = (value, key, index) in/of 对象
注意:① 如果读取了不存在的对象属性 (属性值为 undefined
),Vue 不会显示( 换句话说,Vue 不显示 undefined
!!! )
② 设置 v-for
的元素自身 (上例是 li
标签元素) 也能访问 value
、key
、index
的值
<ul>
<li v-for="(value, key, index) of obj" :class="key + value + index">
<p>{{value}} - {{key}} - {{index}}</p>
</li>
</ul>
- 遍历数组:
v-for = (item, index) in/of 数组
<li v-for="(item, index) of arr">
<p>{{item}} - {{index}}</p>
</li>
- 遍历字符串:
v-for = (char, index) in/of 字符串
<li v-for="(char, index) of str">
<p>{{char}} - {{name}}</p>
</li>
- 遍历到指定数字:
v-for = (num, index) in/of 数字
<!-- 遍历 1 ~ 10,下标为 0 ~ 9 -->
<li v-for="(num, index) of 10">
<p>{{num}} - {{index}}</p>
</li>
v-for
&v-if
的配合使用
- 当
v-if
与v-for
一起使用时:
在 Vue2 中,v-for
的优先级比v-if
高 (先执行),所以v-if
里面可以获取到v-for
的数据item
在 Vue3 中,v-for
的优先级比v-if
低!!! - 但是,极不推荐把
v-if
和v-for
同时用在同一个元素上
我们可以使用计算属性 computed
过滤数据,然后在模版上使用过滤后的数据
<ul>
<li v-for="item of arr2">
<p>姓名:{{item.name}}、年龄:{{item.age}}</p>
</li>
</ul>
let vm = new Vue({
el: "#app",
data: {
arr1: [
{ name: "superman", age: 22 },
{ name: "superwoman", age: 21 },
{ name: "superSon", age: 17 }
]
},
computed: {
arr2() {
return this.arr1.filter(item => item.age > 18);
}
},
});
我们也可以配合 template 标签使用(此时的 key 值需要设置在显示的标签元素上,下例是 li 标签元素):
<ul>
<template v-for="item of arr1">
<li v-if="item.age >= 18">
<p>姓名:{{item.name}}、年龄:{{item.age}}</p>
</li>
</template>
</ul>
绑定 key
属性
:key="元素的唯一标识"
& diff 算法
Vue 会尽可能地复用已有的真实 DOM:
如果,旧虚拟 DOM 中找到与新虚拟 DOM 相同的 key
属性值,则判断:
① 虚拟 DOM 中内容没变,直接使用之前的真实 DOM;
② 虚拟 DOM 中内容变了,则生成新的真实 DOM,随后替换掉页面中之前的真实 DOM
如果,旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key
,则:
创建新的真实 DOM,随后渲染到页面
<button @click="add">点击添加新数据项</button>
<ul>
<!-- 此处使用元素的唯一标识作为 key 的属性值 -->
<li v-for="(item, index) in arr" :key="item.id">
<span>姓名: {{item.name}}、 index: {{index}}、 id: {{item.id}}</span> <input type="text">
</li>
</ul>
let vm = new Vue({
el: "#app",
data: {
arr: [
{ id: 1, name: "谢老师", },
{ id: 2, name: "黄大力", },
{ id: 3, name: "朱古力", }
]
},
methods: {
add() { // 在数组头部添加新元素
this.arr.unshift({ id: 4, name: "美少女" });
}
}
});
如果不设置 key 属性,则默认为 :key="index"
:(脚手架中,不设置 key 属性会直接飘红)
此时,若对数据进行一些改变 DOM 顺序的操作 (eg:逆序添加、逆序删除) 上,会产生没必要的真实 DOM 更新,影响效率;
如果结构中还包含输入类的 DOM,还会出现渲染错误(因为 DOM 对应的索引发生了变化!!!)
<button @click="add">点击添加新数据项</button>
<ul>
<!-- 此处没有使用元素的唯一标识作为 key 的属性值,对于会改变 DOM 顺序的操作,会出现渲染错误 -->
<li v-for="(item, index) in arr" :key="index">
<span>姓名: {{item.name}}、 index: {{index}}、 id: {{item.id}}</span> <input type="text">
</li>
</ul>
所以,如果后期需要对数据项进行操作的话,最好设置 key
值为数据项的唯一标识!!!
如果只是简单地展示数据,则用 index 作为 key 值也没有问题~