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

一开始分别遇到过两个问题：
1、点文章中的一个赞，所有文章的赞全部变红了

2、点赞后，虽然当前文章的赞变红了，但是其他赞过的文章样式没有保持变红的状态

上面两个问题都是共用一个布尔或整数变量导致的。

为了避免点赞时不影响其他文章的点赞样式，需要定义一个数组变量来存放点过赞的文章id，流程如下

贴上代码：

vue实现对文章列表的点赞的更多相关文章

  1. 浅入深出Vue：文章列表

    终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...

  2. 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写

    说明 结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...

  3. BBS论坛 文章详情、点赞、评论

    六.文章详情.点赞.评论 文章详情页面: def article_detail(request, username, article_id): # user_obj = models.UserInfo ...

  4. 第 3 篇：实现博客首页文章列表 API

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 此前在讨论基于模板引擎的开发方式和 django-rest-framework 开发 ...

  5. Laravel大型项目系列教程（四）显示文章列表和用户修改文章

    小编心语:不知不觉已经第四部分了,非常感谢很多人给小编提的意见,改了很多bug,希望以后能继续帮小编找找茬~小编也不希望误导大家~这一节,主要讲的 是如何显示文章列表和让用户修改文章,小编预告一下(一 ...

  6. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

  7. Whatbeg's blog 文章列表

    whatbeg.com 文章列表 ----------------------------------------------------------------------------------- ...

  8. Cocostudio 文章列表

    Cocostudio 文章列表 Cocostudio(1) 容器层的使用- ScrollView ListView PageViewhttp://www.cnblogs.com/TS-qrt/arti ...

  9. C++ 文章列表

    C++ 文章列表 Cocos2dx(1) iconv 跨平台的使用方法(Android, IOS) --- 转码(中文乱码)http://www.cnblogs.com/TS-qrt/articles ...

随机推荐

  1. 怎样实现App安装来源追踪

    众所周知,国内的应用商店存在一定的限制,开发者很难有效监测到App安装来源的精准数据.但在实际推广中,广告效果.用户行为.付费统计.邀请关系等不同渠道的指标却是衡量渠道价值的关键,对App的运营推广和 ...

  2. P1459 三值的排序 Sorting a Three-Valued

    题目描述 排序是一种很频繁的计算任务.现在考虑最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌排序的时候.在这个任务中可能的值只有三种1,2和3.我们用交换的方法把他排成升 ...

  3. 题解 CF588A 【Duff and Meat】

    题意 有一个人,想吃 $n$ 天肉,第 $i$ 天需要吃 $a[i]$ 块肉,第 $i$ 天超市肉价为每块 $b[i]$ 元,买来的肉可以留到后面吃,求这个人在每天都吃到肉的情况下花费的最小值. 题目 ...

  4. 跟哥一起学python（4）- 数据类型之Number

    本节我们开始学习python的数据类型. 什么是数据类型呢?前面我们提过,所谓的编程,就是控制一系列的数据去完成我们预设的逻辑或者功能.所以,编程语言首先要定义一系列对“数据”的处理规则.这些处理规则 ...

  5. B - Planning 早训 贪心

    B - Planning 这个题目我知道要贪心,也知道怎么贪,但是写不出来,感觉自己好菜. 这个题目要用优先队列维护. 题目大意是飞机延误,不同的飞机每次延误一分钟,它的代价不同,然后问,怎么安排才能 ...

  6. 网络流 I - Fox And Dinner CodeForces - 510E

    Fox Ciel is participating in a party in Prime Kingdom. There are n foxes there (include Fox Ciel). T ...

  7. django 整理数据库文档时，从mysql导出的表中没有注释的解决方案

    公司要将Django项目重构成Java项目,也就有了整理数据库文档的经历....... 由于django从model迁移时没有将注释(也就是模型类中的verbose_name)写进mysql的表中,导 ...

  8. CSS的基本语法及页面引用

    CSS的基本语法及页面引用 CSS基本语法 CSS的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个 ...

  9. CC2530通用IO口的输入输出

    一.引脚概述 CC2530有40 个引脚.其中,有21个数字I/O端口,其中P0和P1是8 位端口,P2仅有5位可以使用.P2端口的5个引脚中,有2个需要用作仿真,有2个需要用作晶振.所以可供我们使用 ...

  10. HDU-6030 Happy Necklace 打表+矩阵快速幂

    Happy Necklace 前天个人赛规律都找出来了,n的范围是\(10^{18}\),我一想GG,肯定是矩阵快速幂,然后就放弃了. 昨天学了一下矩阵快速幂. 题意 现在小Q要为他的女朋友一个有n个 ...