Vue实现todolist删除功能

<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>

<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>