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>
Key
*跟踪每个节点的身份，从而重用和重新排序现有的元素
*理想的key值是每项都有的且唯一的id。data.id
数组更新检测
使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() revrse()
