Vue指令3：v-for

Posted 2020-10-14 goodman8

列表渲染

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>

var example1 = new Vue({ el: ‘#example-1‘, data: { items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } })

 

 

 

 

 

结果：

• Foo
• Bar

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>

var example2 = new Vue({ el: ‘#example-2‘, data: { parentMessage: ‘Parent‘, items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } })

结果：

• Parent - 0 - Foo
• Parent - 1 - Bar

你也可以用 of 替代 in 作为分隔符，因为它是最接近 javascript 迭代器的语法：

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

一个对象的 v-for

你也可以用 v-for 通过一个对象的属性来迭代。

<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul>

new Vue({ el: ‘#v-for-object‘, data: { object: { firstName: ‘John‘, lastName: ‘Doe‘, age: 30 } } })

结果：

• John
• Doe
• 30

你也可以提供第二个的参数为键名：

<div v-for="(value, key) in object"> {{ key }}: {{ value }} </div>

firstName: John

lastName: Doe

age: 30

第三个参数为索引：

<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div>

0. firstName: John

1. lastName: Doe

2. age: 30