今天要做一个对文章点赞的功能，实现后的样式如下，点赞后的文章下面的大拇指图标会变红，并且点赞数加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. 《Splunk智能运维实战》——1.7　为本书加载样本数据

    本节书摘来自华章计算机<Splunk智能运维实战>一书中的第1章,第1.7节,作者 [美]乔史·戴昆(Josh Diakun),保罗R.约翰逊(Paul R. Johnson),德莱克·默 ...

  2. Get on the CORBA

    from: <The Common Object Request Broker: Architecture and Specification> Client To make a requ ...

  3. Forrester：开源APM发展势头强劲

    在企业的运营团队看来,系统的稳定性和可靠运行时间是至关重要的.因此,企业更乐意向能够负责的技术提供商购买开发完整的.有文档记录的,并且有售后支持的工具或软件. 一般来说,运营团队没有额外精力来应付新奇 ...

  4. 算法竞赛进阶指南--hamilton路径

    // hamilton路径 int f[1 << 20][20]; int hamilton(int n, int weight[20][20]) { memset(f, 0x3f, si ...

  5. 数据结构--链式栈--C++实现

    #include <iostream> using namespace std; template<class T>class Stack { private: struct ...

  6. postman（动态数据获取）

    一:返回报文为 json 格式 示例:因为充值记录接口中需要用到登录接口返回报文中的信息如下 1.以获取token(JWT)和uid为例 2.在登录接口的tests中写入代码(因为登录接口报文信息中有 ...

  7. Java笔记（day14-17）

    集合类的由来: 对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定. 就使用集合容器进行存储. 集合特点: 1,用于存储对象的容器. 2,集合的长度是可变的. 3,集合中不可以存储基本数据类 ...

  8. Javajdk的安装

    初次接触Java,这是我真正接触的第一门编程语言,在学习它之前,我曾看过一些c语言的书籍,可是并没有进行代码实现,在上手了Java后,并不懂的如何让代码运行,通过一点一点的学习和积累,今天记录下Jav ...

  9. Qt源码解析之-从PIMPL机制到d指针

    一.PIMPL机制 PIMPL ,即Private Implementation,作用是,实现 私有化,力图使得头文件对改变不透明,以达到解耦的目的 pimpl 用法背后的思想是把客户与所有关于类的私 ...

  10. Python Web实战：Python+Django+MySQL实现基于Web版的增删改查

    前言 本篇使用Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能,旨在快速入门Python Web,少走弯路.效果演示在项目实战最 ...