Vue指令之`v-for`和`key`属性
Posted xiaowie
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue指令之`v-for`和`key`属性相关的知识，希望对你有一定的参考价值。
2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。
注意：
在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 i
v-for=" (val,key i)" ,如果只写一个参数表示值，两个是值和键 三个，值、键、索引
v-for 循环普通数组
<body> <!-- v-for 循环普通的数组 和使用foreach 挺像 --> <div class="box"> <p v-for="(item,i) in list">索引值：i----------值：item</p> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue( el:‘.box‘, data: list:[ 1,2,3,4,5,6 ] ); </script> </body>
v-for循环对象数组
<body> <div class="box"> <p v-cloak v-for="(user,i) in list">id：user.id---------名称：user.name</p> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm=new Vue( el:‘.box‘, data: list:[ id:1,name:‘杜伟‘, id:2,name:‘王玥‘, id:3,name:‘任凯‘, id:4,name:‘刘海波‘ ] , methods: ); </script> </body>
v-for 循环对象
<body> <div class="box"> <!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 --> <p v-for="(item,i) in pipor">item----val-----i</p> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm=new Vue( el:‘.box‘, data: pipor: id:1, name:‘杜伟‘, gender:‘男‘ ); </script>
v-for 迭代数字
<body> <div class="box"> <p v-for="item in 10" v-text="item"> </p> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm=new Vue( el:‘.box‘, data: ); </script> </body>
以上是关于Vue指令之`v-for`和`key`属性的主要内容，如果未能解决你的问题，请参考以下文章