Vue.js中的列表渲染：v-for

Vue.js的优点

易用

灵活

高性能

v-for

列表渲染模块

v-for相当于for循环

基本语法

items为数组时

item为值，index为索引

item in items

(item, index) in items

item of items ———- 最接近 JavaScript 迭代器的语法

items为object对象时

item为值，key为键，index为索引

item in items

(item, key) in items

(item, key, index) in items

实例

官网实例：http://cn.vuejs.org/v2/guide/list.html

<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' }
]
}
})

注意：该代码在v1.x的版本下不能正确执行

再v1.x版本的运行结果是这样的



在v1.x的版本下，v-for的index和value的顺序刚好是相反的

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

这样才能得出正确的结果（在v1.x的版本下）

总结

因此，v1.x版本和v2.x版本的差距还是比较大的，所以，再学习使用的时候，一定要注意Vue.js的版本问题，否则……