第七课 Vue中的v-for遍历指令

Vue中的v-for遍历指令

v-for用于对象遍历（数组/JSON），渲染数据列表

基础示例：

    <div id="app"><ul><li v-for="val in arr">{{val}}</li></ul></div><script>new Vue({el: '#app',data: {arr: ['这是数据测试aaa', '这是数据测试bbb', '这是数据测试ccc', '这是数据测试ddd']}})</script>   

数组遍历

1）遍历数组值

    <div id="app"><ul><li v-for="val in arr">{{val}}</li></ul></div><script>new Vue({el: '#app',data: {arr: ['这是数据测试aaa', '这是数据测试bbb', '这是数据测试ccc', '这是数据测试ddd']}})</script>  

2. 遍历数组键/值

    <div id="app"><ul><li v-for="(val, key) in arr">{{key}} ： {{val}}</li></ul></div><script>new Vue({el: '#app',data: {arr: ['这是数据测试aaa', '这是数据测试bbb', '这是数据测试ccc', '这是数据测试ddd']}})</script> 

对象遍历

1. 遍历对象

    <div id="app"><ul><li v-for="val in obj">姓名：{{val.name}} - 年龄：{{val.age}}</li></ul></div><script>new Vue({el: '#app',data: {obj: [{'name': 'Bob', 'age': '20'},{'name': 'Jerry', 'age': '18'},{'name': 'Summer', 'age': '15'},{'name': 'Lili', 'age': '21'},]}})</script>  

2）遍历对象键/值对

    <div id="app"><ul><li v-for="(val, key) in obj">ID:{key}} - 姓名：{{val.name}} - 年龄：{{val.age}}</li></ul></div><script>new Vue({el: '#app',data: {obj: [{'name': 'Bob', 'age': '20'},{'name': 'Jerry', 'age': '18'},{'name': 'Summer', 'age': '15'},{'name': 'Lili', 'age': '21'},]}})</script>