<!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); ???????} ???}});var app = 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小demo
原文地址：https://www.cnblogs.com/intelwisd/p/9185474.html