JS部分:
1 var app = new Vue({ 2 el: "#app", 3 data() { 4 return { 5 list: [1, 2, 3, 4], 6 objList: [ 7 { id: 1, name: 'Tome' }, 8 { id: 2, name: 'Jack' }, 9 { id: 3, name: 'France' }, 10 ], 11 obj: { id: 1, name: 'checky', gender: 'mele', age: 18 } 12 } 13 } 14 });
一、循环数组
1 <ul> 2 <li v-for="item in list"> 3 {{item}} 4 </li> 5 </ul>
结果:
二、循环对象数组
1 <ul> 2 <li v-for="(obj,i) in objList"> 3 {{obj.id}} - {{obj.name}} - {{i}} 4 </li> 5 </ul>
结果:
三、遍历对象
1 <!-- 在便利对象的键值对时,有val、key、index --> 2 <p v-for="(value,key,index) in obj"> 3 {{index}}:{{key}} : {{value}} 4 </p>
结果:
扫描二维码关注公众号,回复:
4888424 查看本文章
四、迭代数字
1 <!-- 用v-for迭代数字,count从1开始 --> 2 <p v-for="count in 10"> 这是第几次{{count}}此循环</p>
结果: