功能要求:点击点赞按钮,点赞数量加1,再次点击,取消点赞(即点赞数量再次减1)

html源码:

<div id="c">
    <pic></pic>
</div>

vue.js源码:

 Vue.component('pic',{
        template:"<button @click='zan'>赞 {{like_count}}</button>",
        data: function(){
            return {
                like_count:10,
                flg:true
            }
        },
        methods:{
            zan: function(){
                if(this.flg){
                    this.like_count++;
                    this.flg = false;
                }else{
                    this.like_count--;
                    this.flg = true;
                }
            }
        }
})

 new Vue({
        el:"#c",
    })

 

运行效果:

原有10个点赞实数,点击点赞按钮,点赞数变成11

再次点击,点赞数还原:

Logo

前往低代码交流专区

更多推荐