列表渲染
官方中文网站：列表渲染 | Vue.js (vuejs.org)
v-for
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
演示代码：
js 代码：
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
template 代码：
<li v-for="item in items">{{ item.message }}</li>
演示结果：
- Foo
- Bar
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for也支持使用可选的第二个参数表示当前项的位置索引。
演示代码：
js 代码：
const parentMessage = ref('Parent')const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
template 代码：
<li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
演示结果：
- Parent - 0 - Foo
- Parent - 1 - Bar
v-for 变量的作用域和下面的 JavaScript 代码很类似：
演示代码：
js 代码：
const parentMessage = ref('Parent')const items = [/* ... */{ message: 'Foo' },{ message: 'Bar' }]
console.log 代码：
items.forEach((item, index) => {// 可以访问外层的 `parentMessage`// 而 `item` 和 `index` 只在这个作用域可用console.log(parentMessage, item.message, index)})
演示结果：
- RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: 'Parent', _value: 'Parent'} 'Foo' 0
- RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: 'Parent', _value: 'Parent'} 'Bar' 1
注意 v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：
演示代码：
js 代码：
const parentMessage = ref('Parent')const items = [/* ... */{ message: 'Foo' },{ message: 'Bar' }]
template 代码：
<li v-for="{ message } in items">{{ message }}</li><!-- 有 index 索引时 --><li v-for="({ message }, index) in items">{{ message }} {{ index }}</li>
演示结果：
- Foo
- Bar
- Foo 0
- Bar 1
对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：
演示代码：
js 代码：
const items=[{ message: 'Hello', children: ['A', 'B', 'C'] },{ message: 'World', children: ['X', 'Y', 'Z'] }]
template 代码：
<li v-for="item in items">