v-for指令,是用来循环的,常用的情况有以下4种
<div id="divApp"> <!--迭代数字--> <p v-for="n in 5">{{n}}</p> <!--显示数组的索引和值--> <p v-for="(a,i) in array">索引:{{i}}-----值:{{a}}</p> <!--显示对象数组--> <p v-for="(p,i) in list">第{{i+1}}个人的姓名是:{{p.name}}</p> <!--显示对象--> <p v-for="(val,key,i) in person">索引:{{i}},键:{{key}},值:{{val}}</p> </div> <script> var v = new Vue({ el: '#divApp', data: { array: ["张三", "李四", "王五", "赵六"],//普通数组 list: [ { id: 1, name: "乔丹" }, { id: 2, name: "科比" }, { id: 3, name: "詹姆斯" } ], person: { id: 1, name:"杜兰特" } }, methods: {} }) </script>
结果,按红框分开对应四种用法
需要注意的地方:
1. 迭代数字时,是从1开始,而不是0。
2. 以<p v-for="(a,i) in array">为例,当不需要索引时,可以写成 a in array,省事。
3. 循环对象,其实就是把对象的每个键值对给列了出来。
4. 在循环对象数组时,常常会用绑定key,让页面元素与属性关联,举个例子,当页面循环的项,因为双向绑定发生数量变化时,之前选中的项,可能会发生变化,因为Vue记住的是,你选中的是第几项,而不是id是多少的项,改成这样
<p v-for="(p,i) in list" v-bind:key="p.id">第{{i+1}}个人的姓名是:{{p.name}}</p>
项的数量发生变化时,会记住之前选中的id,当重新渲染后,会选中id对应的项。
上一篇
下一篇