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为需要替换的值(可以为多个)

上一篇下一篇

猜你喜欢

热点阅读