实现2个button,点击button,button中的数值自加1,并在p标签中显示两个button数值的和
发布于 6个月前 作者 duanran13 934 次浏览 来自 问答
<div id="counter-event-example">
    <p>{{total}}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter',{
        template:'<button v-on:click="incrementCounter">{{counter}}</button>',
        data:function(){
            return{
                counter:0
            }
        },
        methods:{
            incrementCounter:function(){
                this.counter+=1
                this.$emit('increment')
            }
        }
    })
    new Vue({
        el:'#counter-event-example',
        data:{
            total:0
        },
        methods:{
            incrementTotal:function(){
                this.total+=1
            }
        }
    })

这是怎么实现的 菜鸟一枚请见谅

1 回复

data(){ return{

            btn1:0,
            btn2:10,
        }
    },
    methods:{
        incrementTotal(){
            return  this.btn1  +  this.btn2 ++
        }
    },
    computed:{
        total:function(){
            return this.btn1 +this.btn2
        }
    }
回到顶部