Vue.js 学习笔记 八 v-for

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对应的项。

 

上一篇

Vue.js 学习笔记 七 控制样式

 下一篇

Vue.js 学习笔记 九 v-if和v-show

转载于:https://www.cnblogs.com/luyShare/p/11541685.html