v-for 指令
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>
结果:
四、迭代数字
1 <!-- 用v-for迭代数字,count从1开始 --> 2 <p v-for="count in 10"> 这是第几次{{count}}此循环</p>
结果:
五、v-for中key使用,key可以保证数据唯一标识不被改变
JS部分:
1 var app = new Vue({ 2 el: "#app", 3 data() { 4 return { 5 id: "", 6 name: "", 7 users: [ 8 { id: 1, name: '张三' }, 9 { id: 2, name: '李四' }, 10 { id: 3, name: '王五' }, 11 ] 12 } 13 }, 14 methods: { 15 add() { 16 this.users.push({ id: this.id, name: this.name }); 17 } 18 } 19 });
HTML部分:
1 <div>id:<input type="text" v-model="id" /> name: <input type="text" v-model="name"> <button type="button" 2 @click="add">添加</button></div> 3 <p v-for="user in users"> 4 <label><input type="radio" />id:{{user.id}} name:{{user.name}}</label> 5 </p>
页面:
现在如果新添加一条数据id=4,name=XXX,显示结果如下:
每个用户的id没有改变,当我们改变一下add()的方法,如下:
1 add() { 2 this.users.unshift({ id: this.id, name: this.name }); # 改变了列表添加的方式,在头部新加一个 3 }
现在选中李四的勾选框
同样新增一条数据id=4,name=XXX的数据。
由图发现,勾选的李四,新加一条数据后,变成勾选张三了,这时候就需要用到key了,在循环的p标签上加个key属性,然后指定:key=user.id:
1 <p v-for="user in users" :key="user.id"> 2 <label><input type="radio"/>id:{{user.id}} name:{{user.name}}</label> 3 </p>
同样选中李四,再添加一条数据,结果如下,被勾选中的还是李四:
这样就将数据和p标签唯一绑定了。