<!DOCTYPE html><HTML lang="en"><Head> <Meta CharSet="UTF-8"> <Title></title><script src= "./vue.JS"></script></head><body><div id= "root" ><!--<input type= "text" v-model= "MSG" ><button @click = "Handleclick" >submit</button> <Ul> <Li V- for="(item, index) in items" :Key="Index">{{Item}}<Span @click="Deleteclick (index)">Delete</span></li> </ul> --</div> <Script>Vue.Component("Item-list", { Template: `<li>{{itemprops}}<span @click = "Handledeleteson (index)" >delete</span></li> `, Props:["Itemprops", "Index"], Methods: { Handledeleteson(index){ This.$emit("Handledeletes",Index; } }});varApp= New Vue({ El: "#root", Data: { msg: "', Items:[]}, Template: `<div><input type= "text" v-model= "MSG" ><button @click = "Handleclick" >submit</button><ul><item-list v-for= "(item, index) in items": key= "index": itemprops= "item": index= "index" @handleDeleteS = "Deleteclick" ></item-list></ul></div> `, Methods: { Handleclick(){ This.Items.Push( This.msg); This.msg = "'; }, Deleteclick(index){ This.Items.Splice(Index, 1); } }}); </script></body></html>
Vue.js Small Demo