首页 > 其他 > 详细

todolist---插入和删除----vue

时间:2018-09-23 15:44:02      阅读:112      评论:0      收藏:0      [点我收藏+]
 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

原文:https://www.cnblogs.com/alaner/p/9692692.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!