实现一个input功能（vue）

这里书写代码

功能：在输入框输入时，会显示在下面列表中，点击下面列表中的选项，会实现删除。 主要练习：父组件子组件之间的传值，用到了 v-bind,v-model,v-on,v-for

//直接复制粘贴在main.js文件里
import Vue from "vue/dist/vue.js";


Vue.config.productionTip = false;
Vue.component("ToduItem",{
  props:['content','index'],
  template:`
  <li @click="clear">{{content}}</li>
  `,
  methods:{
    clear(){
      this.$emit('delete',this.index)//将事件和值传给父组件
    }
  }
})
new Vue({
  data:{
    list:['第一次提交','第二次提交','第三次提交'],
    inputValue:''
  },
  
  methods:{
   add(){
     this.list.push(this.inputValue)//拿到input的值，放在list列表中
     this.inputValue = ''
   },
   handeDelete(index){
     this.list.splice(index,1)
   }
  },
  template:
  `
  <div>
  <input type="text" v-model="inputValue"/>//绑定input的输入值
  <button @click="add">提交</button>
  <ul>
  <todu-item @delete="handeDelete" :content=item :index=index v-for = "(item,index) in list"></todu-item>
  </ul>
  </div>
  `
}).$mount("#app");