在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. ios12--简易购物车

    Assets.xcassets图片是拖到右边里面去的. // // ViewController.m // 03-综合练习 // #import "ViewController.h" ...

  2. css list menu

    选择让page和folder都显示出来

  3. SVG可伸缩矢量图形

    SVG可伸缩矢量图形 总结 1.svg就像普通标签那么使用 2.svg是xml 3.svg是矢量图,而canvas是位图 学习要点 对HTML5中的SVG有初步的了解 什么是SVG 简单的说SVG文档 ...

  4. luogu 3834 【模板】可持久化线段树 1(主席树)

    我这种菜鸡还是%一下棒神比较好 #include<iostream> #include<cstdio> #include<cmath> #include<cs ...

  5. [luogu_U15118]萨塔尼亚的期末考试

    https://zybuluo.com/ysner/note/1239615 题面 \(T\)次询问,求出\[\sum_{i=1}^n\frac{i}{\frac{n(n+1)}{2}}fib_i\] ...

  6. POJ 1056 IMMEDIATE DECODABILITY Trie 字符串前缀查找

    POJ1056 给定若干个字符串的集合 判断每个集合中是否有某个字符串是其他某个字符串的前缀 (哈夫曼编码有这个要求) 简单的过一遍Trie就可以了 #include<iostream> ...

  7. 大圆那些事 LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别

    LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别 LIBRARY_PATH和LD_LIBRARY_PATH是Linux下的两个环境变量,二者的含义和作用分别如下: LIBRARY ...

  8. sigar的使用

    与普通jar包不同,Sigar API还要依赖本地的库文件来进行工作,其中: Windows下Sigar.jar 依赖:sigar-amd64-winnt.dll 或 sigar-x86-winnt. ...

  9. B-Tree 漫谈 (从二叉树到二叉搜索树到平衡树到红黑树到B树到B+树到B*树)

    关于B树的学习还是需要做点笔记. B树是为磁盘或者其他直接存取辅助存储设备而设计的一种平衡查找树.B树与红黑树的不同在于,B树可以有很多子女,从几个到几千个.比如一个分支因子为1001,高度为2的B树 ...

  10. Unity3d dotween

    位置 1. 移动到指定位置 obj.transform.DOMove(, , ), 2f); a. 单方向可以用DOMoveX.DOMoveY.DOMoveZ b. 本地坐标系版本:DOLocalMo ...