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
    }
   },

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。