4.6.2 列表渲染指令v-for
v-for指令相当于根据组件实例中的数组数据来批量渲染生成大量的新的li数据标签,其遍历形式如下:
4.6.2.1 遍历数组
items为组件实例属性,item为遍历数据对象,index为数据索引,
item in items
或item of items
或(item,index) in items
或{} in items
或({},index) in items
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
// 数组遍历,item为数组中的对象
<li v-for="item in items">
{
{ item.message }}
</li>
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)
})
// 数组中的对象部分解构赋值遍历
<li v-for="{ message } in items">
{
{ message }}
</li>
<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
{
{ message }} {
{ index }}
</li>i>
// v-for嵌套遍历
<li v-for&#