完成TodoList的删除功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button type="button" v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item :content="item"
:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete"
><todu-item>
</ul>
</div>
<script type="text/javascript">
var TodoItem = {
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function(){
this.$emit("delete",this.index)
//子组件向父组件传值，向外触发事件
}
}
}
var app = new Vue({
el:"#app",
components:{TodoItem:TodoItem},
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue),
//push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
this.inputValue=''
},
handleItemDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
步骤：
（1）在子组件绑定监听事件。
template:"<li @click='handleItemClick'>{{content}}</li>",
（2）子组件向父组件传值，向外触发事件。
this.$emit("delete",this.index)
（3）父组件监听向外触发的事件。
@delete="handleItemDelete"
（4）在父组件中添加handleItemDelete方法
handleItemDelete:function(index){
this.list.splice(index,1)
}
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
