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 } },
如此,文章的点赞与差评的代码已完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。