v-for​

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
<li v-for="item in items">{{ item.message }}
</li>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
<li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for 变量的作用域和下面的 JavaScript 代码很类似

const parentMessage = 'Parent'
const items = [/* ... */
]items.forEach((item, index) => {// 可以访问外层的 `parentMessage`// 而 `item` 和 `index` 只在这个作用域可用console.log(parentMessage, item.message, index)
})

注意 v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

<li v-for="{ message } in items">{{ message }}
</li><!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">{{ message }} {{ index }}
</li>

 

<li v-for="{ message } in items">{{ message }}
</li><!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">{{ message }} {{ index }}
</li>

对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

<li v-for="item in items"><span v-for="childItem in item.children">{{ item.message }} {{ childItem }}</span>
</li>

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

<div v-for="item of items"></div>