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

Dear 丶 2022-02-28 12:00 1331阅读 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 条评论，1331人围观）

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

相关阅读

相关 mongodb 实现点赞功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIz

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

相关 Redis实现点赞功能模块

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

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

相关利用redis实现点赞功能

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

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

相关 BitMap算法及实现点赞功能

BitMap简介 bitmap听起来是位图的意思，其实就一种基于位的映射，bitmap是一个十分有用的结构。所谓的Bit-map就是用一个bit位来标记某个元素对应的Va

曾经终败给现在/ 2023年02月13日 04:59/ 0 赞/ 4 阅读

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

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

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

相关局部刷新ListView，实现点赞功能

今天看到一个需要实现一个点赞的功能。自己想没想明白，后来看了http://blog.csdn.net/nupt123456789/article/details/3943278

落日映苍穹つ/ 2022年08月21日 00:20/ 0 赞/ 194 阅读

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

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

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

相关 springmvc实现点赞功能

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

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

相关点赞功能详解

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

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

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

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

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