Vue：条件渲染列表渲染

Vue：条件渲染 & 列表渲染

- 条件渲染
- - v-show
  - v-if
- 列表渲染
- - v-for
  - - 数组
    - 对象

条件渲染

Vue允许依据一定的条件，通过表达式的布尔值，来决定是否渲染某些元素，其依赖于v-show和v-if两条指令。

v-show

v-show可以依据表达式的布尔值，来显示或隐藏元素。

语法：

<标签 v-show="布尔表达式"> </标签>

当布尔表达式为true，那么渲染该标签，如果为false，则不渲染。

示例：

<h2 v-show="false"> hello </h2>
<h2 v-show="1 === 1"> world </h2>

第一个表达式为false，不渲染该标签，第二个表达式为1 === 1，也就是true，渲染该标签。

输出结果：

在这里插入图片描述

只有第二个world被渲染了，第一个hello被隐藏了。查看HTML页面结构，可以看出其是通过display: none属性实现的元素隐藏。

v-if

v-if的功能与v-show类似，但是其更加激进，而且可以配合v-else等指令一起使用。

语法：

<标签 v-if="布尔表达式"> </标签>

示例：

<h2 v-if="false"> hello</h2>
<h2 v-if="1 === 1"> world </h2>

把刚才的v-show改为v-if。

输出结果：

在这里插入图片描述

虽然也只输出了world，但是其隐藏元素的方式和v-show不同，此处hello直接消失了，根本没有这个DOM元素。

因此对于高频率替换显示与隐藏的标签，建议使用v-show，其只修改属性而不增删DOM元素，效率更高。

v-if还可以配合v-else-if和v-else使用，进行多分支条件判断：

语法：

<标签 v-if="布尔表达式"> </标签>
<标签 v-else-if="布尔表达式"> </标签>
<标签 v-else-if="布尔表达式"> </标签>
......
<标签 v-else="布尔表达式"> </标签>

其中v-else-if和v-else前面，必须存在v-if。

示例：

<p>当前的n值是:{{n}}</p>
<button @click="n++">n+1</button> </br>
<div v-if="n === 1">Vue:v1</div>
<div v-else-if="n === 2">Vue:v2</div>
<div v-else-if="n === 3">Vue:v3</div>
<div v-else>Vue:latest</div>

n是vm.data下的一个属性，初始值为1，每次点击按钮自增，都会使n++并且重新渲染模板，依据条件判断，渲染不同的节点。

输出结果：

在这里插入图片描述

起初值为1，触发v-if。

在这里插入图片描述

当n > 3时，触发v-else，输出Vue:latest。

v-if或v-show也经常添加到一个父级元素上，当元素被隐藏，所有子元素也会一起隐藏。

<h2 v-if="n === 1">hello</h2>
<h2 v-if="n === 1">JavaScript</h2>
<h2 v-if="n === 1">Vue</h2>

例如以上代码，可以只使用一个v-if一次性对多个元素进行条件渲染：

<div v-if="n === 1"><h2>hello</h2><h2>JavaScript</h2><h2>Vue</h2>
</div>

但是这样三个元素最外层会多出一层div：

在这里插入图片描述

在部分场景下，最外层的div可能会影响内部的元素，此时可以使用<template>标签：

<template v-if="n === 1"><h2>hello</h2><h2>JavaScript</h2><h2>Vue</h2>
</template>

输出结果：

在这里插入图片描述

这种情况下，三个<h2>标签外层直接就是root，没有多出来的<div>了。

列表渲染

v-for

当拿到一个数组或者对象时，如果需要遍历输出所有的元素，那么v-for指令可以很方便的完成该功能，且无需手动写循环。

语法：

<标签 v-for="元素 in/of 数组/对象" :key="键"> </标签>

中间的关键字，既可以是in也可以是of。

数组

当v-for遍历数组时，元素可以接收两个参数，格式如下：

<标签 v-for="(元素值, 下标) in/of 数组" :key="键"> </标签>

暂时忽略这个:key，不写该值。

示例：

<div id="root"><ul>下标 姓名 年龄<li v-for="(p,index) of persons">{{index}} - {{p.name}} - {{p.age}}</li></ul>
</div><script type="text/javascript">new Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],}})
</script>

在Vue实例中，有一个数组persions，内含三个对象，在<li>中通过v-for遍历该数组，输出所有值。

其中(p,index) of persons表示，遍历persons数组，每次将拿到的元素放到p中，该元素的下标放到index中。

在模板内部，可以通过{{}}插值语法直接使用这些值。

输出结果：

在这里插入图片描述

这样就成功渲染了所有对象，但是有一个很大的问题，那就是没有使用:key这个参数。

在数组操作中，如果没有key，那么默认为index，但这是一个不太安全的行为。

简单修改一下HTML结构：

<ul>下标 姓名 年龄<li v-for="(p,index) of persons" :key="index">{{index}} - {{p.name}} - {{p.age}} <input></li>
</ul>

每一个选项，都添加一个<input>输入框。

启动后，为每个输入框输入对应的姓名：

在这里插入图片描述

在控制台中，为数组头部增加一个元素赵六：

在这里插入图片描述

奇怪的事情发生了，张三的输入框到了赵六后面，李四的输入框到了张三后面，所有输入框都错位了，这就是:key=index惹的祸。

当模板重新解析时，v-for不会重新生成所有的DOM元素，而是尽可能复用原先的元素，而元素复用依赖于key的设定。

如下图：

在这里插入图片描述

由于默认情况下:key=index，Vue认为更新前后key相同的选项之间，可以进行复用。

插入新元素后，重新解析模板。v-for进行第一轮循环，遍历到赵六key=index=0，于是查看原先index=0的位置，也没有可以复用的元素，发现<input>可以复用，于是把原先index=0的<input>进行复用，放到赵六的后面。

后续同理，key=index=1时，复用原先index=1位置的<input>，导致拿到了错位的数据。

直到key=index=4时，发现原先没有该数据，生成一个新的元素<input>。

可以理解为，原先index=0的位置的元素，被新的index=0的位置的元素复用了，就是因为key=index。因此，key一般不设置为数组下标，而是每个数组元素的唯一id。

<ul>下标 姓名 年龄<li v-for="(p,index) of persons" :key="p.id">{{index}} - {{p.name}} - {{p.age}} <input></li>
</ul>

在每个数组元素中，都设置了对应的id，指定:key="p.id"。

和之前一样，插入一个新元素：

在这里插入图片描述

这一次由于更新前后，每个数组元素的id不变，所以<input>也正确匹配了。

对象

当v-for遍历对象时，元素也可以接收两个参数，格式如下：

<标签 v-for="(值, 键) in/of 对象" :key="键"> </标签>

当遍历的是对象时，第一个参数接收值，第二个参数接收键，:key一般指定为属性名，因为一个对象插入或删除元素后，每个属性的名称是不变的。

示例：

<div id="root"><ul><li v-for="(value, k) of mouse" :key="k">{{k}}: {{value}}</li></ul>
</div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{mouse:{brand:'Logitech',price:'199',color:'black'}}})
</script>