Implement an Input function (VUE)

I’ll write the code here

Function: When input in the input box, it will be displayed in the following list. Click the option in the following list to achieve deletion. Main exercise: V-bind, V-model, V-ON, V-for was used to transfer values between parent and child components

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:[' first commit ',' second commit ',' third commit '], InputValue: "}, methods:{add(){this.list.push(this.inputValue) This.inputvalue = ""}, handeDelete(index){this.list.splice(index,1)}}, template: '<div> <input type="text" V-model ="inputValue"/>// bind input value < button@click ="add"> submit </button> <ul> <todu-item @delete="handeDelete" :content=item :index=index v-for = "(item,index) in list"></todu-item> </ul> </div> ` }).$mount("#app");Copy the code