Vue入门 - 条件渲染与列表渲染

1 条件渲染

条件渲染根据布尔值活表达式判断是否渲染。

条件渲染有一下两类：

v-if系列：值为true时插入dom，否则移除。

v-show：节点保持在dom中，只是控制css的display属性。

1.1 v-if系列

v-if系列指令包括：

1. v-if

2. v-else

3. v-else-if

<h1 v-if="name='A'">A</h1>
<h1 v-else-if="name='B'">B</h1>
<h1 v-else-if="name='C'">C</h1>
<h1 v-else>not A B C</h1>

若要在多个元素上使用v-if指令，可以用

<template>

将这些元素包裹起来。

v-else和v-else-if要紧跟v-if或v-else-if后，逻辑要对得上。

vue会复用已有元素渲染，如果需要避免复用，则需为元素赋值key属性，表示这些元素是独立的。

v-if与v-for一起使用时，v-for优先级更高。

1.2 v-show

v-show只是控制css的display属性。

v-show不支持

<template>

语法。

2 列表渲染 v-for

v-for可以遍历数组、对象、整数循环渲染dom。

用法：

//迭代数组
<ul>
<li v-for="item in items">{{item.text}}</li>
</ul>
//增加索引参数
<ul>
<li v-for="(item, index) in items">{{item.text}}</li>
</ul>

//迭代对象
<ul>
<li v-for="value in object">{{value }}</li>
</ul>
//增加键名、索引参数
<ul>
<li v-for="(value,key,index) in object">{{value }}</li>
</ul>

//迭代整数
<div>
<span v-for="n in 10">{{ n }}</span>
</div>

//渲染多个元素块
<template v-for="item in items">
<li>{{temp.name}}</li>
<li>{{item.value}}</li>
<template>

在v-for块中，拥有对父作用域属性的完全访问权限。

in可用of替代。

v-for迭代组件，需在组件中使用props属性接收数据。

尽量为v-for的元素赋值key属性避免复用。

2.1 数组更新检测

当数组的以下变异方法被触发时，vue会检测数组的变化，而后更新视图。

1. push()

2. pop()

3. shift()

4. unshift()

5. splice()

6. sort()

7. reverse()

使用filter等非变异方法时，可以将返回值赋值给原数组实现视图更新。

注意

vue不能检测下列变动的数组：

1. 利用索引直接设置某一项的值。

2. 修改数组的长度。

解决方法：

1. 使用Vue.set()：

Vue.set(example1.items, indexOfItem, newValue)

2. 使用splice()方法：example1.items.splice(newLength)

这里可以看出，对于值类型数据的变更检测，如果指针未发生变化，或没有直接赋值操作，则无法触发检测。而vue中的检测走的是setter，所以对于这种无法检测的情况，可以使用Vue.set()方法，就会进入setter从而触发检测。

显示过滤/排序结果

若想不改变原数组，可以使用计算属性，或者在v-for中使用表达式：

v-for="n in func(data)"