vue.js 运用组件实现点赞按钮的功能
功能要求:点击点赞按钮,点赞数量加1,再次点击,取消点赞(即点赞数量再次减1)html源码:<div id="c"><pic></pic></div>vue.js源码:Vue.component('pic',{template:"<button @click='zan'>赞 {{like...
·
功能要求:点击点赞按钮,点赞数量加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
再次点击,点赞数还原:
更多推荐
已为社区贡献11条内容
所有评论(0)