vue实现对文章列表的点赞
今天要做一个对文章点赞的功能,实现后的样式如下,点赞后的文章下面的大拇指图标会变红,并且点赞数加1

一开始分别遇到过两个问题:
1、点文章中的一个赞,所有文章的赞全部变红了
2、点赞后,虽然当前文章的赞变红了,但是其他赞过的文章样式没有保持变红的状态
上面两个问题都是共用一个布尔或整数变量导致的。
为了避免点赞时不影响其他文章的点赞样式,需要定义一个数组变量来存放点过赞的文章id,流程如下

贴上代码:



vue实现对文章列表的点赞的更多相关文章
- 浅入深出Vue:文章列表
终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...
- 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写
说明 结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...
- BBS论坛 文章详情、点赞、评论
六.文章详情.点赞.评论 文章详情页面: def article_detail(request, username, article_id): # user_obj = models.UserInfo ...
- 第 3 篇:实现博客首页文章列表 API
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 此前在讨论基于模板引擎的开发方式和 django-rest-framework 开发 ...
- Laravel大型项目系列教程(四)显示文章列表和用户修改文章
小编心语:不知不觉已经第四部分了,非常感谢很多人给小编提的意见,改了很多bug,希望以后能继续帮小编找找茬~小编也不希望误导大家~这一节,主要讲的 是如何显示文章列表和让用户修改文章,小编预告一下(一 ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表
显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据 目录 ASP.N ...
- Whatbeg's blog 文章列表
whatbeg.com 文章列表 ----------------------------------------------------------------------------------- ...
- Cocostudio 文章列表
Cocostudio 文章列表 Cocostudio(1) 容器层的使用- ScrollView ListView PageViewhttp://www.cnblogs.com/TS-qrt/arti ...
- C++ 文章列表
C++ 文章列表 Cocos2dx(1) iconv 跨平台的使用方法(Android, IOS) --- 转码(中文乱码)http://www.cnblogs.com/TS-qrt/articles ...
随机推荐
- mac 关闭系统完整性保护 SIP(System Integrity Protection)的方法
在 OS X El Capitan 中有一个跟安全相关的模式叫 SIP(System Integrity Protection ) ,它禁止让软件以 root 身份来在 mac 上运行,并且对于目录 ...
- mybatis源码学习(一):Mapper的绑定
在mybatis中,我们可以像下面这样通过声明对应的接口来绑定XML中的mapper,这样可以让我们尽早的发现XML的错误. 定义XML: <?xml version="1.0&quo ...
- Struts2深入之动态调用Action
使用过Struts2的小伙伴们应该知道当我们的action的方法过多是如果需要通过Struts2框架进行运行,我们就必须在Struts2的配置文件Struts2.xml文件中配置多个action属性标 ...
- opencv-11-中值滤波及自适应中值滤波
开始之前 在上一篇我们实现了读取噪声图像, 然后 进行三种形式的均值滤波得到结果, 由于我们自己写的均值滤波未作边缘处理, 所以效果有一定的下降, 但是总体来说, 我们得到的结果能够说明我们的算法执行 ...
- Nginx比SRS做得好的地方
在nginx.org文档中,摘录了一篇nginx介绍的文章,Chapter “nginx” in “The Architecture of Open Source Applications”,这篇文章 ...
- 题解 AT4867 【[ABC155D] Pairs】
题目 两次二分 首先对ans进行二分,在\([-10^{18},10^{18}]\)之间 考虑怎么check 对于每个ans,枚举每个\(a_i\),二分查找有几个\(a_j\),使得\(a_i\ti ...
- javascript阻止子元素继承父元素事件
$('.box').on('click', function (e) { if(e.target == this) { console.log(e.target) } })
- OSG程序设计之osg::NodeVisitor
本文所有内容来自<OpenSceneGraph三维渲染引擎设计与实践>一书. 本文主要讨论的是OSG中节点的访问. 对于节点的访问是从节点接收一个访问器开始的,用户执行某个节点的accep ...
- 支付宝小程序云开发(Serverless)
支付宝小程序云开发(Serverless) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 一.在支付宝账号里面开通小程序云服务 ...
- 王颖奇 20171010129《面向对象程序设计(java)》第十周学习总结
实验十 泛型程序设计技术 实验时间 2018-11-1 1.实验目的与要求 (1) 理解泛型概念: (2) 掌握泛型类的定义与使用: (3) 掌握泛型方法的声明与使用: (4) 掌握泛型接口的定义与 ...