vue实现文章点赞和差评功能
更新时间：2022年04月14日 14:30:30 作者：每一份笔记都是美好回忆
这篇文章主要为大家详细介绍了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+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vue-resource调用promise取数据方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)
对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题
这篇文章主要介绍了vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue中的slot封装组件弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了如何利用vue中的draggable插件实现多选拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync，今天小编带领大家学习下:visible.sync 的作用，感兴趣的朋友一起看看吧2022-11-11
这篇文章主要介绍了vue项目打包部署后默认路由不正确的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue中如何实现字符串换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,这篇文章主要给大家介绍了关于Vue导出Excel功能的相关资料,需要的朋友可以参考下2021-07-07
最新评论