vue实现文章点赞和差评功能
时间：2022-07-12 10:56:16|栏目：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
}
},
如此，文章的点赞与差评的代码已完成。
上一篇：vue中watch监听器的触发时机(watch的坑及解决)
栏 目：vue
下一篇：没有了
本文标题：vue实现文章点赞和差评功能
本文地址：http://www.codeinn.net/misctech/207578.html
