vue评论功能,vue点赞并增加点赞数
这篇文章主要为大家详细介绍了某视频剪辑软件实现文章点赞和差评功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现文章点赞和差评功能的具体代码，供大家参考，具体内容如下
纯前端实现文章点赞与差评（支持与不支持)。
需求：状态1:用户没有操作过，即既没点赞和差评；状态二：用户点赞过；状态三：用户差评过。点赞或差评过后无法取消，可切换。如下图：
数字正射影像图结构：
！-顶-
view class= flex-1 flex ai-center JC-center animate _ _ animate _ _ animate _ _ fast hover-class= animate _ _ jello text-main
@ click= do support( support ):class= item。支持。type=== support ？支持-主动:
text class= icon font icon-dianzan 2 Mr-2 /text
文本{ { item。支持。support _ count } }/text
/查看
！-踩-
view class= flex-1 flex ai-center JC-center animate _ _ animate _ _ animate _ _ fast hover-class= animate _ _ jello text-main
@ click= do support( un support ):class= item。支持。type===不支持？支持-主动:
text class= icon font icon-Cai Mr-2 /text
文本{ { item。支持。un support _ count } }/text
/查看
目录数据：
const demo=[{
用户名： 昵称，
用户pic:"/静态/标签ber/索引已选择。png”，
新闻时间："2021年一月一日"下午1:00,
isFollow: false，
标题： 我是标题，
titlepic: /static/2956568.jpg ，
支持：{
类型： support ，//支持
支持_计数：1,
不支持计数：2
},
评论_计数：2,
共享数量：2
}, {
用户名： 昵称，
用户pic:"/静态/标签ber/索引已选择。png”，
新闻时间："2021年一月一日"下午1:00,
isFollow: false，
标题： 我是标题，
titlepic: /static/2956568.jpg ，
支持：{
类型："不支持",//不支持
支持_计数：1,
不支持计数：2
},
评论_计数：2,
共享数量：2
}, {
用户名： 昵称，
用户pic:"/静态/标签ber/索引已选择。png”，
新闻时间："2021年一月一日"下午1:00,
isFollow: false，
标题： 我是标题，
titlepic: /static/2956568.jpg ，
支持：{
类型： ,//无操作
支持_计数：1,
不支持计数：2
},
评论_计数：2,
共享数量：2
}]
目录数组每个项目定义了一个类型，当类型为支持则为支持；当类型为不支持则为不支持；当类型为空时则为无操作。
点击方法：点击之后子组件通知父组件并传递点击的是哪篇文章（索引),点击的是赞还是踩（支持还是不支持)
//顶踩操作
DoSupport(类型){
//通知父组件
这个发出( doSupport ，{
类型：类型，
index: this.index
})
}
父组件中接收：
逻辑是：
拿到当前对象let item=this.list[e.index]
1.如果是之前没有操作过，则改变它的类型，并让它的相对应的数数加1;
2.如果是之前顶过，现在点踩，那么则改变它的类型为不支持，并让顶的数数数减一同时踩的数数数加一；
3.如果是之前踩过，现在点赞，那么则改变它的类型为支持，并让顶的数数数加一同时踩的数数数减一；
//顶踩操作
doSupport(e) {
//拿到当前对象
let item=this.list[e.index]
//之前没有操作过
if (item.support.type===) {
item.support.type=e.type
item.support[e.type _count]
返回
}
//之前顶过
如果(项。支持。type===支持 e . type===不支持){
item.support.type=e.type
//踩一
item.support.unsupport_count
//顶-1
item.support.support_count -
返回
}
//之前踩过
如果(项。支持。type=== un support e . type=== support ){
item.support.type=e.type
//顶一
项目。支持。支持_计数
//踩-1
item.support.unsupport_count -
返回
}
},
这样，文章的好评和差评的代码就完成了。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。