ちょうきょう666

导航

8.VUE计数器，基于组件 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="t">
            <rrr ref="one" @change="Jtotal"></rrr>
            <rrr ref="two" @change="Jtotal"></rrr>
            <div>{{total}}</div>
        </div>
        <script>
            Vue.component("rrr",{
                template:"<div @click='hand'>{{number}}</div>",
                data:function(){
                    return{
                        number:0
                    }
                },
                methods:{
                    hand:function(){
                        this.number++
                        this.$emit("change")
                    }
                }
                
            })
            var vm=new Vue({
                el:"#t",
                data:{
                    total:0    
                },
                    
                methods:{
                    Jtotal:function(){
                        this.total=this.$refs.one.number+this.$refs.two.number
                    }
                }
            })
        </script>
    </body>
</html>

 

posted on 2021-02-05 12:11  ちょうきょう666  阅读(50)  评论(0)    收藏  举报