VUE(删除功能)

35 篇文章 0 订阅

点击提交可增加li,点击li可删除当前li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" />
            <button @click="change">提交</button> 
            <ul>
                <todo-item v-for="(item,index) of list":key="index" :content="item" :index="index" 
                @delete="handleDelete"><!--监听delete,当delete触发之后执行父组件下面的handleDelete事件-->
                </todo-item> <!--将item,index从父组件(id为root的div)传递到子组件(li)用属性绑定-->
                <!--将item传到全局组件里面才能使用-->
            </ul>
            <zujian></zujian>
        </div> 
        <script>
            Vue.component('todo-item',{  //定义名为todo-list的全局组件
                props:['content','index'],
                template:'<li @click="handleClick">{{content}}{{index}}</li>',
                methods:{    //组件也是实例
                    handleClick:function(){
                        this.$emit('delete',this.index)  //点击item之后触发emit事件里面的delete事件值为index,
                    }
                }
            })
            
            var zujian={  //定义名为zujian的局部组件,并且必须在new Vue里面声明(28行)。
                template:'<div>这是局部组件</div>'
            }
            new Vue({
                el:"#root",
                components:{
                    'zujian':zujian
                },
                data:{  
                    inputValue:'',
                    list:[]
                },
            methods:{
                change:function(){
                    this.list.push(this.inputValue);
                    this.inputValue=''               //将"input”放入list里面之后将其初始为空
                },
                handleDelete:function(index){
                    this.list.splice(index,1)
                }
            }
            })
        </script>
    </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值