- <!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>
来源: http://www.bubuko.com/infodetail-2644862.html