Vue列表渲染
2019-09-29 本文已影响0人
九瀺
<ul>
<li v-for = "(item,index) in persons" :key = ""index></li>
</ul>
<button @click = "delete(index)">删除</button>
<button @click = "update(index,{name : "sss", age : 52})">更新</button>
...
data : {
persons : [ {name : "cat",age : 18},
{name : "cat",age : 18},
{name : "cat",age : 18}
]
}
methods :{
delete(index) {
this.persons.splice(index,1);
},
updata(index,newVal) {
this.persons.splice(index,1,newVal)
}
}
vue本身只是监视了persons的改变,没有监视数组内部数据的改变
vue重写了数组中的一系列改变数组内部结构的方法(先调用原生,在更新界面),类似splice、push等等
splice方法具有增删改的作用 splice(index,howmany,value1,value2...) index 为修改起始位置的索引,howmany为修改长度(为0则是增加),value为需要替换的值(可以为多个)