在v-for循环里

<ul class="project_content">
<li v-for="(item, index) in items" :key="index" v-if="index%2==0">
<div class="project_wrap clearfix">
<router-link :to="{path:'/detail',query: { id: item.goods_id }}" class='project_inner'>
<img :src="item.original_img" class='original_img'>
</router-link>
<div class="article_name">{{item.article_name}}</div>
<div class="article_message">
<div class="user_info">
<div class="user_img"><img :src="item.user_img" alt=""></div>
<span class="user_name">{{item.user_name}}</span>
</div>
<div class="article_likes" @click="dolikes(index)"><span v-bind:class="[item.likesbefore? 'likesbefore':'likesafter']"></span><span class="likes" v-bind:class="[item.likesbefore ? 'gray':'pink']">{{item.likes}}</span></div>
</div>
</div>
</li>
</ul>

  

函数带上index

methods: {
//时间操作函数执行
dolikes(index){
  console.log(this.items[index])
  this.items[index].likes = this.items[index].likesbefore ?parseInt(this.items[index].likes) +1:parseInt(this.items[index].likes) -1
  this.items[index].likesbefore=!this.items[index].likesbefore;
  console.log(this.items[index].likesbefore)
  }

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

  1. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  2. Vue 左右翻页,点赞动画

    因做小活动比较多,使用了一些动画,做些笔记,供大家参考 翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...

  3. vue组件之间通信总结---点赞

    总结:父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son ...

  4. vue实现对文章列表的点赞

    今天要做一个对文章点赞的功能,实现后的样式如下,点赞后的文章下面的大拇指图标会变红,并且点赞数加1 一开始分别遇到过两个问题:1.点文章中的一个赞,所有文章的赞全部变红了 2.点赞后,虽然当前文章的赞 ...

  5. 项目公共js(vue.js)

    var urlHead = "http://hm.runorout.com/";// var urlHead = "/";/*加入跑班相关*/var urlGe ...

  6. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  7. Vue开源项目库汇总

    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...

  8. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  9. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...

随机推荐

  1. MySQL max_connections 总是 214 。不能设大了? max_connections = 214

    MySQL max_connections 总是 214 .不能设大了? centos7 mariadb 修改 max_connections 总是214 It was indeed limits s ...

  2. Systick 更新

    之前写的systick_config(loadvalue) 根据系统时钟为72Mhz来写的,如果system clock不是72MHz怎么办? 重新写了一下,先获取,系统时钟频率. //参数为ms v ...

  3. [Swift通天遁地]二、表格表单-(14)实时调整表单元素的激活和失效

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. 枚举详解之EnumSet、EnumMap用法

    枚举简单例子 /** * @author shuliangzhao * @Title: Color * @ProjectName design-parent * @Description: TODO ...

  5. 数据库部署到linux服务器,供本地访问。

    1.  将本地的sql文件上传至服务器 scp /Users/fangke/Documents/article.sql root@IP:/usr/local 2. 登陆服务器的mysql 3. 创建数 ...

  6. Java保存错误日志信息

    我们平时在撸代码的时候,有时候需要将某个代码块的具体错误信息保存到数据库或文件中,以便日后方便快速的查找问题. 使用e.printStackTrace(),我们可以将信息保存在具体的变量中,然后写入数 ...

  7. Spring思维课程导图——bean属性的设置

  8. sqlyog注册码激活

    姓     名(Name):ttrar 序 列 号(Code):8d8120df-a5c3-4989-8f47-5afc79c56e7c 或者(OR) 姓     名(Name):ttrar 序 列 ...

  9. 未能加载文件或程序集Microsoft.SharePoint.Sandbox.dll

    项目引用了MiscroSoft.SharePoint.dll程序集,编译后页面报错: 未能加载文件或程序集“Microsoft.Sharepoint.Sandbox, Version=14.0.0.0 ...

  10. 2015.12.20-2015.12.25 大论文迭代 A

    进一步充实大论文内容.结构,完善一遍大论文 12.20周天,完成论文第五章总结部分,和第一章的修改 12.21周一,完成论文第二章的修改充实 12.22周二,完成论文第三章的修改充实 12.23周三, ...