1、v-for指令,基于一个数组来渲染一个列表。(也可以基于一个对象)
(注意:指令v-for,也可以被template标签使用)
2、v-for指令,需要使用(item,index)in items 形式的特殊语法。其中
1>items 是源数据数组。
2>item 是被迭代的数组元素的别名。
3>index 是索引。
或者 (value,key,index)in obj 形式的特殊语法。其中
1> obj 是源数据对象。
2> key 是被迭代的对象属性名,value 是被迭代的对象属性值。
3> index 是索引。
3、v-for中 key属性的使用
1> key属性值的类型只能是string或number,主要用在Vue的虚拟DOM算法,在新旧nodes对比辩识Nodes。
2> 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
而使用key时,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。
3> 相同父元素的子元素key值必须唯一不能重复,重复的key会造成渲染错误。
4、当使用v-for遍历数组时,如果没有指定key,当数组元素顺序发生变更时,DOM绑定的数据会更新,而DOM本身的顺序不会变化。
如果指定了key,当数组元素顺序发生变更时,DOM会和数据同步更新。
<template v-if='false'><!--5、没有指定key的话,首先给列表的第一个数据项羊肉串打✓,再点击添加按钮--> <div v-for='(item,index) in list'><!--发现新添加的数据项,出现在原列表羊肉串数据项的前面,即索引位置不变,索引的内容改变了--> <label> <!--而打√的依旧是列表第一个索引的复选框。--> <input type="checkbox">{{item.title}} </label> </div> <button type="button" v-on:click='add()'>添加</button> </template> <template><!--5、指定key的话,索引位置不变,索引内容也不变。也就是说,key是一个不能动态变化的唯一值,类似id--> <div v-for='(item,index) in list' :key='item.id'><!--key绑定的可以是: 1、数据唯一值id,一般这个id可以通过ajax从后台接口中的数据拿到--> <label> <!--2、自己做一个时间戳赋值给key,只要key值不一样就行--> <input type="checkbox">{{item.title}} <!--3、循环嵌套时候,可设置为对应级别的index索引--> </label> </div> <button type="button" v-on:click='add()'>添加</button> </template>
<script> let data={ list:[ {id:1,title:'羊肉串',price:2}, //5、key绑定的是数据唯一值id,一般这个id可以通过ajax从后台接口中的数据拿到 {id:2,title:'啤酒',price:4}, {id:3,title:'花毛一体',price:10} ], }; methods:{ add(){ this.list.unshift( {id:4,title:'土豆片',price:2},);//5、key绑定的是数据唯一值id,一般这个id可以通过ajax从后台接口中的数据拿到 } } </script>
5、Vue实例的set()方法,检测数据更新即监听属性值变化,解决数据更新,不能即时渲染到视图中的问题。
比如,数据对象中的某个数据(特指数组里的数据)变化了,但是刷新页面,发现视图相关数据无法更新(这个问题不是100%会发生的,为了兼容性,一定要在代码后面加Vue实例的set()方法)
<script> let data={ list:[ {id:1,title:'羊肉串',price:2}, {id:2,title:'啤酒',price:4}, {id:3,title:'花毛一体',price:10} ], };
vue.$data.list[1].price=14; //4、Vue实例的set()方法,检测数据更新即监听属性值变化,解决数据更新,不能即时渲染到视图中的问题。 /* **第一个参数:要更新的数据源、对象或数组。 **第二个参数:key或是索引。 **第三个参数:要赋的值。
*/ vue.set(vue.$data.list,1,vue.$data.list[1]);//在改变数据对象某个数据的代码后面,紧跟这个方法,才能起作用。
//this.$set(this.list,1,this.list[1]);//当this指向Vue实例时候,也可以这样写。 </script>