todolist---插入和刪除----vue
阿新 • • 發佈：2018-09-23
har col v-model javascrip -m delet roo con href
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> todolist刪除</title> 6 <link rel="stylesheet" href="test1.css"> 7 <script type="text/javascript" src="vue.js"></script> 8 9 </head> 10 <body> 11<div id="rooter"> 12 <input type="text" v-model="valueput"/> 13 <button @click="handler">提交</button> 14 <ul> 15 <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" 16 @delete="handleDelete"></todo-item> 17</ul> 18 </div> 19 <script> 20 var todoitem={ 21 props:["content","index"], //將值從父組件來接聽 22 template:‘<li @click="had">{{content}}</li>‘, 23 methods:{ 24 had:function () { 25 this.$emit("delete",this.index); //可以將值傳給父組件26 } 27 } 28 }; 29 new Vue({ 30 el:‘#rooter‘, 31 data:{ 32 valueput:"", 33 list:[], 34 content:‘‘ 35 }, 36 components:{ 37 ‘todo-item‘:todoitem 38 }, 39 methods:{ 40 handler:function(){ 41 this.list.push(this.valueput); 42 this.valueput=""; 43 44 }, 45 handleDelete:function(index){ 46 this.list.splice(index,1); 47 } 48 } 49 50 }); 51 console.log(1); 52 </script> 53 </body> 54 </html>
父組件向子組件傳遞參數，通過屬性的方式和props
子組件向父組件傳遞參數，通過發布的方式：this.$emit("",...............)
todolist---插入和刪除----vue