vue实现静态页面点赞和取消点赞功能
【vue实现静态页面点赞和取消点赞功能】本文实例为大家分享了vue实现静态页面点赞和取消点赞的具体代码，供大家参考，具体内容如下
效果如下：
点击之后 点赞数量+1，红心亮
再次点击，点赞数量-1，红心灭
文章图片
文章图片
逻辑：
由于列表是动态渲染的（for），数据是mock随机生成，所以绑定点击事件时，应该把当前下标和item的id都传到事件上，在data里面声明空数组，用来存放已经点击的id，
点赞点击事件触发，先进行判断，
1.当前data内的数组是否有这个点击的id，用indexof方法查找，如果找不到，执行点赞功能，数量+1，红心样式取反，最重要的是将当前点赞的id存到data的数组里 push进去。
2.反之找到了，就将他数量-1，心取消。
for遍历data的数组，目的是为了找到当前点击的id的下标，找到后，直接利用splice删除的放法，splice（i，1）第一个参数为下标，第二个删除一个，vue组件代码如下：
文章图片
文章图片
{{ item.headName }}
{{ item.content }} {{ item.dianzan }} {{ item.pinglun }}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
推荐阅读
- ASP.NET|ASP.NET Core中使用Redis实现缓存
- vue中keep-alive组件实现多级嵌套路由的缓存
- java|使用虹软SDK实现离线人脸识别（局域网）
- vue学习|Vue基础实现bilibili移动端页面
- javascript|Vue.js全家桶仿哔哩哔哩动画 (移动端APP)
- vue|VUE哔哩哔哩移动端项目使用vant 实现发布功能（上传文件）
- 开源项目|Vue项目实战 —— 哔哩哔哩移动端开发
- 视频教程|Web 前端视频资源分享（Bootstrap/Vue/小程序）
- 数据结构|顺序表的基本操作及C语言实现（详解版）
- vuepress按照官方文档创建后跑起来乱码的原因