vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue文章点赞和差评

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

作者:每一份笔记都是美好回忆

这篇文章主要为大家详细介绍了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
        }
      },

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

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

您可能感兴趣的文章:
阅读全文