vue.js 运用组件实现点赞按钮的功能

功能要求：点击点赞按钮，点赞数量加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

再次点击，点赞数还原：