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
实例
<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的版本问题,否则……