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

Dear 丶 2022-02-28 12:00 1390阅读 13赞

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

![20190325183925591.png][]

再次点击，点赞数还原：

![20190325184032155.png][]

[20190325183925591.png]: /images/20220228/962f0dbc835b46538ced6efb1ca6960c.png
[20190325184032155.png]: /images/20220228/88275ceeb1fc4d4a9ab63421c11e6624.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1390人围观）

还没有评论，来说两句吧...

相关阅读

相关 mongodb 实现点赞功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIz

不念不忘少年蓝@/ 2023年10月06日 08:51/ 0 赞/ 113 阅读

相关 Redis实现点赞功能模块

功能点设计比如我喜欢发文章的掘金网站就有点赞的功能，统计文章点赞的总数，用户所有文章的点赞数，因此设计的点赞功能模块具有以下功能点：某篇文章的点赞数用

浅浅的花香味﹌/ 2023年09月23日 23:34/ 0 赞/ 167 阅读

相关 springboot如何实现点赞功能

在资讯类的项目中，我们常常遇到文章评论和点赞等功能实现。但是这些功能再项目中是高频出现的，如果直接操作数据库的话，对数据库压力太大。那遇到这个问题怎么解决？ ![waterm

淩亂°似流年/ 2023年06月27日 05:48/ 0 赞/ 41 阅读

相关利用redis实现点赞功能

以一个博客功能为例，给一个博客进行点赞我使用的是redis五种类型中的set类型思路 redis set key 为博客Id，value为用户集 1.用

素颜马尾好姑娘i/ 2023年05月31日 15:23/ 0 赞/ 135 阅读

相关 redis实现点赞功能的设计

如何利用redis来设计一个高效并且简单的点赞功能呢? 所以说明博主设计点赞是类似论坛的评论和回复点赞哈当然其余的点赞功能也都区别不大关键点有这么几个

骑猪看日落/ 2023年02月17日 06:21/ 0 赞/ 103 阅读

相关 java实现点赞(顶)功能

java实现点赞(顶)功能 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

朱雀/ 2022年11月28日 16:30/ 0 赞/ 300 阅读

相关 jQuery-简单点赞功能实现

jQuery-简单点赞功能实现感谢云知梦。全部代码如下： ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] !

叁歲伎倆/ 2022年06月11日 02:53/ 1 赞/ 319 阅读

相关 springmvc实现点赞功能

实现步骤： 1.设计表： -- ---------------------------- -- Table structure for `nice

系统管理员/ 2022年05月20日 00:41/ 0 赞/ 411 阅读

相关点赞功能详解

点赞功能详解先讲讲点赞功能的实现。首先，你得为点赞功能建立一个表，表里需要记录点赞的topic的ID,已经点赞的人的id. 对应的实体类如下： p

爱被打了一巴掌/ 2022年03月16日 03:42/ 0 赞/ 421 阅读

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

功能要求：点击点赞按钮，点赞数量加1，再次点击，取消点赞（即点赞数量再次减1） html源码： <div id="c"> <pic></pic>

Dear 丶/ 2022年02月28日 12:00/ 13 赞/ 1391 阅读