代码如下所示:
<div id="app"> <input v-model="inputvalue"> <button @click="handlesumbit">提交</button> <todo-item v-for="(item,index) of list":key="index":content="item":index="index" @delete="handledelete"></todo-item> </div>
子组件向父组件传递数据使用 this.$emit('delete',this.index)
该方法
<script > vue.component('todo-item',{ props:["content",'index'], template:"<li @click='handlesubmit'>{{content}}{{index}}</li>", methods:{ handlesubmit:function () { this.$emit('delete',this.index) } } }) new vue({ el:'#app', data:{ inputvalue:'', list:[] }, methods:{ handlesumbit:function () { this.list.push(this.inputvalue); this.inputvalue=""; }, handledelete:function (index) { this.list.splice(index,1) } } }) </script>
总结
以上所述是小编给大家介绍的vue实现todolist删除功能,希望对大家有所帮助