在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. [JSOI 2010] 满汉全席

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1823 [算法] 2-SAT [代码] #include<bits/stdc++ ...

  2. [SDOI 2009] 晨跑

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1877 [算法] 不难看出,第一问要求的是最大流,第二问求的是最小费用最大流 注意建图 ...

  3. $(document).ready 与 window.onload的区别?

    $(document).ready  = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...

  4. hibernate类或方法---备忘录

  5. yii2的form表单用法

    使用表单 本章节将介绍如何创建一个从用户那搜集数据的表单页.该页将显示一个包含 name 输入框和 email 输入框的表单.当搜集完这两部分信息后,页面将会显示用户输入的信息. 为了实现这个目标,除 ...

  6. flask 初始

    一.flask安装 这里提供两种安装方式: 第一种: pip3 install flask 第二种: pip3 install -i https://pypi.douban.com/simple/ f ...

  7. ACM_栈的压入、弹出序列

    栈的压入.弹出序列 Time Limit: 2000/1000ms (Java/Others) Problem Description: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列 ...

  8. RabbitMQ~一些术语和最消息的生产

    学习一种技术需要先了解它,而想要学好一种技术,需要更多的了解它的组成,原理和实现机制! RabbitMQ安装介绍 RabbitMQ是由erlang语言开发的,所以必须先有安装erlang,类似java ...

  9. cocos2d-js 添加广告

    http://www.cocoachina.com/bbs/read.php?tid=225655

  10. Task.Run 和 Task.Factory.StartNew

    在.Net 4中,Task.Factory.StartNew是启动一个新Task的首选方法.它有很多重载方法,使它在具体使用当中可以非常灵活,通过设置可选参数,可以传递任意状态,取消任务继续执行,甚至 ...