Vue学习笔记(四) 条件渲染和列表渲染
1、条件渲染
（1）v-if
v-if 指令 用于条件性（根据表达式的值）渲染内容，可以与 v-else 指令 和 v-else-if 指令 一同使用
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-if="type === 'A'">A</p>
<p v-else-if="type === 'B'">B</p>
<p v-else-if="type === 'C'">C</p>
<p v-else>Else</p>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'A'
}
})
</script>
</body>
</html>
（2）v-if & v-show
v-show 指令 同样可以根据表达式的真假渲染内容
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-show="isSeen">A</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isSeen: true
}
})
</script>
</body>
</html>
它们不同之处在于：v-if 是直接添加或删除 DOM 元素，而 v-show 是修改元素的 display 属性
因此，v-if 适用于相对稳定的元素，v-show 适用于频繁切换的元素
（3）template
v-if 是一个指令，因此必须添加到一个元素上，如果希望同时添加到多个元素上该怎么办呢？
可以使用 <template> 元素当做不可见的包裹元素，并在上面使用 v-if
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<template v-if="isOk">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
isOk: true
}
})
</script>
</body>
</html>
2、列表渲染
v-for 指令 用于渲染一个列表
（1）使用数组
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [
{ message: 'Hello' },
{ message: 'Hi' }
]
}
})
</script>
</body>
</html>
v-for 用于数组时，还支持一个可选的第二个参数，即当前项的索引：v-for="(item, index) in items"
（2）使用对象
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
object: {
firstName: 'Steve',
lastName: 'Jobs'
}
}
})
</script>
</body>
</html>
v-for 用于对象时，还支持一个可选的第二个参数，即当前项的键：v-for="(value, key) in object"
还支持一个可选的第三个参数，即当前项的索引：v-for="(value, key, index) in object"
（3）使用整数
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<span v-for="n in 10">{{ n }} </span>
</div>
<script>
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
（4）维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用 “就地更新” 的策略
也就是说，如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序
而是就地更新每个元素，并且确保它们在每个索引位置正确渲染
因此为了跟踪每个节点，我们需要为每一个项提供一个唯一的 key（一般使用基本属性作为 key）
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
（5）数组 更新检测
对于数组而言，使用变异方法会自动触发视图更新，变异方法包括：
push()pop()shift()unshift()splice()sort()reverse()
// 可以尝试在控制台中直接对前面的例子调用变异方法
vm.items.push({ message: 'Goodbye'})
而使用非变异方法则总是返回一个新数组，这时可以使用新数组替代旧数组以触发视图更新，非变异方法包括：
filter()concat()slice()
// 可以尝试在控制台中对前面的例子调用非变异方法，使用新数组替代旧数组
vm.items = vm.items.filter(function (item) {
return item.message.match(/Hi/)
})
注意，还有以下两种情况不能检测数组的变化：
- 利用索引设置数组的值，例如
vm.items[indexOfItem] = newValue - 修改数组的长度，例如
vm.items.length = newLength
这时，我们都可以使用变异方法 splice() 解决：
- 利用索引设置数组的值，
vm.items.splice(indexOfItem, 1, newValue) - 修改数组的长度，
vm.items.splice(newLength)
（6）对象 变更检测
以下的情况同样不能检测对象的变化：
- 添加对象属性，例如
vm.newValue = value（此时，newValue 不是响应式属性）
这时，我们可以使用实例方法 vm.$set 解决：
- 添加对象属性，
vm.$set(object, propertyName, value)
【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】
