v-for

v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

遍历数组

语法：

v-for="item in items"

 

• items：要遍历的数组，需要在vue的data中定义好。

• item：迭代得到的数组元素的别名

示例

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'峰哥', gender:'男', age: 18},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        },
    })
</script>

效果：

数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

• items：要迭代的数组

• item：迭代得到的数组元素别名

• index：迭代到的当前元素索引，从0开始。

示例

    <ul>
        <li v-for="(user, index) in users">
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>

效果：

遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

• 1个参数时，得到的是对象的属性值

• 2个参数时，第一个是属性值，第二个是属性名

• 3个参数时，第三个是索引，从0开始

示例：

<div id="app">
    <ul>
        <li v-for="(value, key, index) in user">
            {{index + 1}}. {{key}} - {{value}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'峰哥', gender:'男', age: 18}
        }
    })
</script>

效果：

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

示例：

<ul>
    <li v-for="(item,index) in items" :key=index></li>
</ul>

• 这里使用了一个特殊语法：:key="" 我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性

• 这里我们绑定的key是数组的索引，应该是唯一的