VUE大神的成长之路--列表渲染

v-for 指令根据一组数组的选项列表进行渲染
基本用法
---数组迭代----v-for
<ul id="example-1">
<li v-for="(item, index) in items">
{{ item.message }}
</li>
</ul>

var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message : 'Foo'},
{ message : 'Bar'}
]
}
})
====>输出 Foo,Bar
---对象迭代----v-for
value: 每个迭代的值,key: 每个迭代的键名,index: 每个迭代的索引值
<ul id="repeat-object" class="demo">
<li v-for="(value, key, index) in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
数组更新检测:
Vue包含一组观察数组的变异方法,会改变被这些方法调用的原始数组,所以他们也将会触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法:filter(), concat(), slice(),这些不会改变原始数组,但总会返回一个新数组。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容