放上代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://unpkg.com/vue/dist/vue.js"></script> 6 <title></title> 7 <style type="text/css"> 8 #div_form{ 9 border:1px solid #990000; 10 width: 50%; 11 } 12 </style> 13 </head> 14 15 <body> 16 <div id="div_form"> 17 <form> 18 <label for="input_id">TODO:</label> 19 <input type="text" id="input_id" placeholder="e" v-model="input_data"/> 20 <button @click.prevent="Add">Add</button> 21 </form> 22 23 <ul> 24 <li 25 is="todo-item" 26 v-for="(todo,title) in todos" 27 :key="todo.id" 28 :title="todo.title" 29 v-on:remove="todos.splice(title, 1)" 30 ></li> 31 </ul> 32 33 <!-- <div v-for="(value,name) in todos"> 34 {{todos[name].id}} 35 </div> --> 36 </div> 37 38 <script type="text/javascript"> 39 Vue.component('todo-item',{ 40 template:` 41 <li> 42 {{ title }} 43 <button v-on:click="$emit('remove')">Remove</button> 44 </li> 45 `, 46 props: ['title'] 47 }) 48 49 50 new Vue({ 51 el:"#div_form", 52 data:{ 53 input_data:'', 54 todos:[ 55 { 56 id:1, 57 title:'sfdsf', 58 }, 59 { 60 id:2, 61 title:'dsad', 62 }, 63 { 64 id:3, 65 title:"fdsfdsf", 66 }, 67 ], 68 nextTodoId: 4 69 }, 70 methods:{ 71 Add:function(){ 72 this.todos.push({ 73 id: this.nextTodoId++, 74 title: this.input_data 75 }) 76 this.input_data = '' 77 } 78 } 79 }) 80 </script> 81 </body> 82 </html>
放上效果图：
