Vue：使用vue-cli实现 todolist，自动添加一行，自动删除一行（三）

src\TodiList.vue

<template>
  <div id="app">
    <input v-model="inputValue" />
    <button @click="handleSubmit">提交</button>
    <ul>
         <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handleDelete"
       >
       </todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem'

export default {
  components:{
    'todo-item':TodoItem
  },

  data:function(){
      return {
          inputValue:'',
          list:[]
      }
  },
  methods:{
      handleSubmit(){
          this.list.push(this.inputValue)
          this.inputValue = ''
      },
    handleDelete(index){
      this.list.splice(index,1)
    }
  }
}
</script>

<style>

</style>

 

src\components\TodoItem.vue

<template>
  <li @click="handleDelete">{{content}}</li>
</template>
 
<script>
export default {
  props:['content','index'],
  methods:{
    handleDelete(){
      this.$emit('delete',this.index)
    }
  }
}
</script>
 
<style scoped>
 
</style>