标签：需要 v-for class 策略 color 顺序 必须 简单 new
2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。
<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>
<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>
<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>
<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>
标签：需要 v-for class 策略 color 顺序 必须 简单 new
原文地址：https://www.cnblogs.com/xiaowie/p/11577222.html
