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

2024-04-02 19:04:59 907人浏览薄情痞子

摘要

本文实例为大家分享了Vue实现文章点赞和差评功能的具体代码，供大家参考，具体内容如下纯前端实现文章点赞与差评（支持与不支持）。需求：状态1：用户没有操作过，即既没点赞和差评；状态

本文实例为大家分享了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
        }
      },

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

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue实现文章点赞和差评功能

本文链接: https://www.lsjlt.com/news/145994.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341