本文详细介绍了Vue.js中v-for列表渲染指令、v-if和v-show条件表达式的使用，以及它们在数据变化时的响应机制。同时讨论了v-if和v-show的选择原则，并提到了filter过滤器的用法，强调了性能优化中的key属性应用。
目录
前言
指令是Vue.is 模板中最常用的一项功能，主要职责是当其表达式的值改变时，将其产生的连带影响响应式地作用于 DOM 元素。Vue.is 提供了很多内置指令，可以用简洁的代码来实现一些复杂的功能。这些内置指令是以v-开头的，它们作用于 HTML 元素，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，可以将指令看作特殊的 HTML 特性。
1.v-for的使用
列表渲染指令v-for
v-for 指令是在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令 v-for。当 Vue.js 用 v-for 正在更新已染过的元素列表时，它默认用“就地复用”策略如果数据项的顺序被改变，Vue.js 将不再移动 DOM 元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
基本用法：v-for是 Vue.js 的循环语它的表达式需要结合着 in 或 of 来使用，类似item in items的形式。
v-for结合of使用：
<div>
<ul id="app">
<li v-for="(item,index) of fruit" :key="index">
索引值index：{{index}}---每一项item{{item}}
</li>
</ul>
</div>
<script src="vue.js">
new Vue({
el:"#app",
data:{
fruit:["西瓜","葡萄","草莓","苹果"]
}
})
</script>运行结果如图所示：
在表达式中，fruit 是数组，item 是当前的一条数据，index 代表当前索引值。列表染也可以用 in 来代替of 作为分隔符。
key 属性可以提高循环的性能。例如：如果需要往 fruit 数组中新增数据，如果不用 key 属性的话，网页中整个列表都会被重新渲染，这样的代码会降低页面的性能，甚至在数据量多的时候会造成卡顿。这时，如果使用 kev 值的话，Vue.is 就会只渲染新变化的内容。因此，key 属性可以增强渲染性能，避免重复渲染
除了循环数组外，v-for 还可以循环对象和对象数组，具体如下
v-for循环数组对象
<div>
<ul id="app">
<li v-for="(item,index) of fruit" :key="index">
索引值index：{{index}}---每一项name：{{item.name}}---每一项color:{{item.color}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
fruit: [
{ name: "西瓜", color: "绿色" },
{ name: "葡萄", color: "紫色" },
{ name: "橙子", color: "橘色" },
{ name: "苹果", color: "红色" },
]
}
})
</script>运行结果如图所示：
v-for还可以用来迭代整数，具体如下：
<div id="app">
<ul>
<li v-for="count of 10">
这是第{{count}}次循环
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
})
</script>运行结果如图所示：
2.v-if 和 v-show
（1）v-if 的使用
v-if 是 Vue. 的条件语句，v- if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。需特别注意的是，v-if 所关联的是 Vue.is 的动态变量
v-if 的使用一般有两个场景
(1)通过条件判断展示或者隐藏某个元素或者多个元素
(2)进行视图之间的切换
v-if 的基本使用：
注：使用 v-if 进行条件判断,条件为 true 则显示此标签,false 则不显示
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({el: ' #app',
data: {
seen: true
}
})
</script>运行结果如图所示：
seen 是 Vue.js 定义的一个变量。v-if 的变量值一般是 true 或者 false，当变量值为 true 时则显示元素，当变量值为 false 时隐藏元素。
可以用 v-else 指令给 v-if 添加一个”else"块，如下所示
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p v-else>你看不到我了</p>
</div>
<script>
new Vue({
el: ' #app',
data: {
seen: true
}
})
</script>运行结果如图2-1所示：
将代码中 seen 的值改为 false，则运行结果如下图所示
在 Vue.is 的2.1.0版本中新增了 v-else-if，顾名思义，用作 v-if 的 else-if 块
v-else-if的基本使用
<div id="app">
<p v-if = "type==1">1</p>
<p v-else-if = "type==2">2</p>
<p v-else=" type==3">3</p>
</div>
<script>
new Vue({
el: ' #app',
data: {
type:2
}
})
</script>运行结果如图所示：
当 type 变量值为1 时、网页上显示“1”;当 type 变量值为 2 时，网页上显示“2”;当 type 变量值为3时，网页上显示“3”。
注意:v-else 、v-else-if 必须跟在 v-if 或者 v-else-if 之后
（2）v-show的使用
v-show 是另一个条件渲染语句，用于根据条件展示元素，用法与 v-if 大致一样
v-show的基本使用
<div id="app">
<h1 v-show ="ok"> Hello! </h1>
</div>
<script>
new Vue({
el: ' #app',
data: {
ok:true
}
})
</script>运行结果如图所示：
带有 v-show 的元素始终会被渲染并保留在 DOM 中，v-show 指使用 CSS 式来控制元素的显示和隐藏。值得注意的是，v-show 不支持<template>元素，也不支持 v-else。
（3）v-if和v-show的选择
v-if 和 v-show都可以用来动态地控制 DOM 元素的显示和隐藏，但是，两者是有区别的。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;v-if 也是“惰性”的:如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
v-if 和 v-show 的比较示例
<div id="app">
<h1 v-show="seenShow">Show:ture</h1>
<h1 v-show="notSeenShow">Show:false</h1>
<h1 v-if="seenIf">If:true</h1>
<h1 v-if="notSeenIf">If:false</h1>
</div>
<script>
new Vue({
el: ' #app',
data: {
seenShow:true,
notSeenShow:false,
seenIf:true,
notSeenIf:false
}
})
</script>检查浏览器的 Elements，可以看到如下图所示的内容
可以看到使用 v-if 隐藏的内部元素不会被显示，Vue.js 不会尝试生成对应的 html 代码，而v-show 是通过 CSS 的 display: none 来控制的。那么，v-if 和 v-show 应该如何选择使用呢?
一般来说，v-if 每次插入或者移除元素时都必须生成元素内部的 DOM 树，因此具有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show 较好;如果在运行时条件很少改变，则使用 v-if 较好。
3.filter过滤器
Vue.js 允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化(也就是修饰文本，但是文本内容不会改变)。
过滤器可以用在两个地方:双花括号插值或 v-bind 表达式。
过滤器分全局过滤器和局部过滤器。
局部过滤器的使用示例：
<div id="app">
<p>电脑价格:{{price |addPriceIcon}}</p>
</div>
<script>
new Vue({
el: ' #app',
data: {
price:200
},
filters:{
addPriceIcon(value){
return'￥' + value
}
}
})
</script>运行结果如图所示：
这段代码的需求是，将价格前面加上人民币符号(￥)。模板中文本(price)后边需要添加管道符号( | )作为分隔，管道符( | )后边是文本的处理函数(addPriceIcon)，处理函数的第一个参数是管道符前边的文本内容(price)。这时可能你会疑惑，为什么不能手动把人民币符号(￥)加上去呢?但是实际开发中，一个页面可能有上千个价格需要添加，或者有几十个页面需要添加的情况，所以这种通用机制很重要。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
