vue实现文章点赞和差评功能

本文实例为大家分享了vue实现文章点赞和差评功能的具体代码,供大家参考,具体内容如下

纯前端实现文章点赞与差评(支持与不支持)。

需求:状态1:用户没有操作过,即既没点赞和差评;状态二:用户点赞过;状态三:用户差评过。点赞或差评过后无法取消,可切换。如下图:

dom结构:

<!-- 顶 -->
      <view class="flex-1 flex ai-center jc-center animate__animated animate__fast" hover-class="animate__jello text-main"
        @click="DoSupport('support')" :class="item.support.type === 'support'? 'support-active':''">
        <text class="iconfont icon-dianzan2 mr-2"></text>
        <text>{{item.support.support_count}}</text>
      </view>
      <!-- 踩 -->
      <view class="flex-1 flex ai-center jc-center animate__animated animate__fast" hover-class="animate__jello text-main"
        @click="DoSupport('unsupport')" :class="item.support.type === 'unsupport'? 'support-active':''">
        <text class="iconfont icon-cai mr-2"></text>
        <text>{{item.support.unsupport_count}}</text>
</view>

list数据:

const demo = [{
    username: "昵称",
    userpic: "/static/tabber/indexSelected.png",
    newstime: "2021-1-1 下午1:00",
    isFollow: false,
    title: "我是标题",
    titlepic: "/static/2956568.jpg",
    support: {
      type: "support", //支持
      support_count: 1,
      unsupport_count: 2
    },
    comment_count: 2,
    share_num: 2
  }, {
    username: "昵称",
    userpic: "/static/tabber/indexSelected.png",
    newstime: "2021-1-1 下午1:00",
    isFollow: false,
    title: "我是标题",
    titlepic: "/static/2956568.jpg",
    support: {
      type: "unsupport", //不支持
      support_count: 1,
      unsupport_count: 2
    },
    comment_count: 2,
    share_num: 2
  }, {
    username: "昵称",
    userpic: "/static/tabber/indexSelected.png",
    newstime: "2021-1-1 下午1:00",
    isFollow: false,
    title: "我是标题",
    titlepic: "/static/2956568.jpg",
    support: {
      type: "", //无操作
      support_count: 1,
      unsupport_count: 2
    },
    comment_count: 2,
    share_num: 2
  }]

list数组每个item定义了一个type,当type为support则为 支持;当type为unsupport则为不支持;当type为空时则为无操作。

点击方法:点击之后子组件通知父组件并传递点击的是哪篇文章(index),点击的是赞还是踩(支持还是不支持)

// 顶踩操作
DoSupport(type) {
        // 通知父组件
        this.$emit('doSupport', {
          type: type,
          index: this.index
        })
}

父组件中接收:

逻辑是:

拿到当前对象:let item = this.list[e.index]

1.如果是之前没有操作过,则改变它的type,并让它的相对应的count加1;

2.如果是之前顶过,现在点踩,那么则改变它的type为unsupport,并让顶的count数减一同时踩的count数加一;

3.如果是之前踩过,现在点赞,那么则改变它的type为support,并让顶的count数加一同时踩的count数减一;

// 顶踩操作
doSupport(e) {
        // 拿到当前对象
        let item = this.list[e.index]
        // 之前没有操作过
        if (item.support.type === '') {
          item.support.type = e.type
          item.support[e.type + '_count']++
          return
        }
        // 之前顶过
        if (item.support.type === 'support' && e.type === 'unsupport') {
          item.support.type = e.type
          // 踩+1
          item.support.unsupport_count++
          // 顶-1
          item.support.support_count--
          return
        }
        // 之前踩过
        if (item.support.type === 'unsupport' && e.type === 'support') {
          item.support.type = e.type
          // 顶+1
          item.support.support_count++
          // 踩-1
          item.support.unsupport_count--
          return
        }
      },

如此,文章的点赞与差评的代码已完成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue transition实现点赞动画效果的示例

    目录 效果一览 爱心效果 数字滚动动画 点赞动画 效果一览 爱心效果 材料:爱心图标两个,没有我这种 icon 组件的用 png 图片代替 <transition :name=" isLike ? 'zoom' : '' " mode="out-in"> <!-- 爱心图标 --> <icon data="@icon/like.svg" color="#FF0000" v-if="isL

  • Vue实现简单的发表评论功能

    本文实例为大家分享了Vue实现简单的发表评论功能的具体代码,供大家参考,具体内容如下 1.这是我在学习中的实例,有些的不足的地方,还望各位大佬指点,感谢哦~ 2.发表评论的效果图 点击"发表"之后的效果(每条评论之后点击"删除"可以删掉这一整条评论~) 3.完整代码展示(我html结构写的比较乱,这里提醒大家一下,没有定义类的div是可以删掉的,我是因为方便写样式所以多加了div) 还是要提醒一下,不要忘记引入vue.js,目录记得根据自己存放的位置改 <!D

  • vue实现直播间点赞飘心效果的示例代码

    前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用 示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @

  • VUE利用vuex模拟实现新闻点赞功能实例

    回顾新闻详细页 很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储. 1.首先在Vuex.Store 实例化的时候: state:{ user_name:"", newslist:[], newsdetail:{} }, 增加一个newsdetail 对象,newslist 数组是我们前面用来保存新闻列表数据的. 2.下面就

  • vue实现评论列表

    本文实例为大家分享了vue实现评论列表的具体代码,供大家参考,具体内容如下 案例数据使用localStorage持久性存储 全局过滤器实现时间格式化 代码部分 <!DOCTYPE html> <html lang="zh">     <head>         <meta charset="UTF-8">         <meta name="viewport" content="

  • vue组件之间通信实例总结(点赞功能)

    本文实例讲述了vue组件之间通信.分享给大家供大家参考,具体如下: 总结: 父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过$parent 直接在子

  • 解决vue-seamless-scroll滚动加点赞衔接处数据不同步问题

    VUE使用vue-seamless-scroll自动滚动加点赞,因为有两个overhidden导致点击不同同步dom,在代码中会出现两处vue-seamless-scroll上下悬接,悬接处点赞触发没反应,导致原因:下方悬接vue-seamless-scroll是静态的,没同步DOM 解决办法:加上this.$refs.seamlessScroll.reset() 表示重置意思 到此这篇关于解决vue-seamless-scroll滚动加点赞衔接处数据不同步问题的文章就介绍到这了,更多相关vue

  • vue开发实现评论列表

    本文实例为大家分享了vue开发实现评论列表的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width,initial-scale=1.0">     <lin

  • Vue+Bootstrap收藏(点赞)功能逻辑与具体实现

    Vue+Bootstrap收藏(点赞)功能逻辑与具体实现(原创),供大家参考,具体内容如下 点赞功能逻辑 点赞功能说明:连接了数据库,在有登录功能的基础上. 点赞功能具体实现目标,如下: 1.用户点击一次加入收藏,数量加一,再次点击取消收藏,数量减一 : 2.当多用户收藏,喜欢数量累加 : 3.如果用户已收藏,显示红心(点亮图标),未收藏,否之. : 点赞功能说明:点赞功能用到两个表,点赞表和数据表的count. 功能分析: 具体实现如图,可把该功能分为两个部分,分别实现. 1.红心部分逻辑:

  • vue实现静态页面点赞和取消点赞功能

    本文实例为大家分享了vue实现静态页面点赞和取消点赞的具体代码,供大家参考,具体内容如下 效果如下: 点击之后 点赞数量+1,红心亮再次点击,点赞数量-1,红心灭 逻辑: 由于列表是动态渲染的(for),数据是mock随机生成,所以绑定点击事件时,应该把当前下标和item的id都传到事件上,在data里面声明空数组,用来存放已经点击的id,点赞点击事件触发,先进行判断,1.当前data内的数组是否有这个点击的id,用indexof方法查找,如果找不到,执行点赞功能,数量+1,红心样式取反,最重要

随机推荐