<template>
<div id="app">
<div v-for="todo in todos" :key="todo.id">
<div>{{todo}} <button @click="handleDelete(todo.id)">删除</button></div>
</div>
</div>
</template>
<script>
export default {
name:'app',
data(){
return{
todos:[
{id:1,title:"待办事项1",completed:false},
{id:2,title:"待办事项2",completed:false},
{id:3,title:"待办事项3",completed:false},
]
}
},
methods:{
handleDelete(id){
console.log('id :'+id);
this.todos = this.todos.filter(todo => todo.id != id);
}
}
}
</script>
<style>
*{margin: 0;padding: 0;box-sizing: border-box}
</style>