1.对渲染的每条数据绑定一个key,使得缓存强制刷新,不能使用index作为key
```html
<div id="app">
<form>
<input type="text" v-model="name">
<input @click.prevent="addPerson" type="submit" value="添加">
</form>
<ul>
<li v-for="(person,index) in persons" :key="person.id">
<input type="checkbox">
<span>{{index}}--{{person.name}}</span>
</li>
</ul></div>
<script>
var vm = new Vue({
el: '#app',
data: {
persons: [{name: "zs",id: 1},
{name: "ls",id: 2},
{name: "ww",id: 3}],
name: ""
},
methods: {
addPerson() {
let lastPerson = this.persons[this.persons.length - 1]
let newPerson = {
name: this.name,
id: lastPerson.id + 1
}
// this.persons.push(newPerson);
this.persons.unshift(newPerson);
this.name = ""
}
}
})
</script>