遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。
1.遍历数组
语法:
v-for="item in items"
-
-
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"
-
-
item:迭代得到的数组元素别名
-
index:迭代到的当前元素索引,从0开始。
示例:
<ul> <li v-for="(user, index) in users"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul>
效果:
v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"
-
-
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>
效果:
4.key
当 Vue.js 用 v-for
正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
但是要实现这个功能,你需要给Vue一些提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
属性。理想的 key
值是每项都有的且唯一的 id。
示例:
<ul> <li v-for="(item,index) in items" :key=index></li> </ul>
-
-
这里我们绑定的key是数组的索引,应该是唯一的