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 ...
随机推荐
- R 语言命令行参数处理
在unix.windows外部需要调用R脚本执行,然后又需要输入不同的参数,类似shell脚本的命令行参数输入,可以使用Rcript命令实现. 命令格式:Rscript [options] [-e e ...
- RobotFrameWork 自动化环境搭建(基于 python2.7)
1.自动化工具安装顺序 robot Framework(两个RF框架) WXpython(不要更改安装路径,自动安装在python文件中) 安装依赖库 RF3.0 和 RF1.5.2.1 打开 rid ...
- LeetCode 45. 跳跃游戏 II | Python
45. 跳跃游戏 II 题目来源:https://leetcode-cn.com/problems/jump-game-ii 题目 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素 ...
- RocketMQ-架构篇
RocketMQ-架构篇 1.Broker Broker是RocketMQ的服务端组件之一,所有消息存储在Broker上,所有的投递.消费请求也都由Broker进行处理.Broker是有状态的应用,本 ...
- Linux下swap到底有没有必要使用
周五看到QQ群里在讨论Linux主机上到底需不需要开启swap空间,而且目前公有云主机默认都是把swap关了的,很多公司也是没有开启swap,那到底需不需要开启呢? 我之前在看<鸟哥的Linux ...
- Shell脚本(二)数学运算
直接上代码. #!/bin/bash no1= no2= echo "using let ..." let result=no1+no2 echo "result is: ...
- spring内嵌jetty容器,实现main方法启动web项目
Jetty 是一个开源的servlet容器,它为基于Java的web容器,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开发人员可以将 ...
- 数据预处理 —— padding数据
1. 论Conv2d()里的padding和Conv2d()前padding的区别及重要性. 小生建议,尽量少用Conv2d()里的填充方式,换成自定义填充方式(强烈建议). 小生为何这样建议 ...
- LeetCode--LinkedList--83.Remove Duplicates from Sorted List(Easy)
题目地址https://leetcode.com/problems/remove-duplicates-from-sorted-list/ 83. Remove Duplicates from Sor ...
- Pytorch 四种边界填充方式(Padding)
1. 选用卷积之前填充(强烈建议) 小生非常推荐大家不再使用卷积所带的填充方式,虽然那种方式简单,但缺陷太多.① 不能根据自己的需要来决定上与下填充不等的边界,左右填充不等的边界:② 边界填充零容易出 ...