为什么删不了？？？？？WTF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todoList</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 20px;
text-align: center;
}
body{
background-color: #f56;
}
#box{
margin-top: 200px;
color: white;
font-weight: 700;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="txtValue">
<input type="button" @click='handleClick' value="提交">
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script>
//创建一个全局组件
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#box",
data:{
txtValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.txtValue),
this.txtValue=''
},
handleDelete:function(index){
this.list.splice=(index,1)
}
}
})
</script>
</body>
</html>
