<div id="app">
<ul>
<li
v-for = "(item,index) in todos"
:key = "item.id"
>
<p> {{ item.task }} </p>
<div class="btn_box">
<button @click = "modify"> 修改 </button>
<button @click = "remove( index )"> 删除 </button>
</div>
</li>
</ul>
</div>
/*
key:
作用: 给vdom打标记,实现同层级比较
案例:
经验:
列表渲染都要加key,key一定是要唯一的标识,最好是id
*/
new Vue({
el: '#app',
data: {
msg: 'hello ',
todos: [
{
id: 1,
task: '任务一'
},
{
id: 2,
task: '任务二'
}
]
},
methods: {
remove ( index ) {
this.todos.splice( index,1 )
},
modify ( e ) {
// 点击修改让整个li的背景颜色为红色
const li = e.target.parentNode.parentNode
li.style.background = 'red'
}
}
})