vue 实现点赞
在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 实现点赞的更多相关文章
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- Vue 左右翻页,点赞动画
因做小活动比较多,使用了一些动画,做些笔记,供大家参考 翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...
- vue组件之间通信总结---点赞
总结:父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son ...
- vue实现对文章列表的点赞
今天要做一个对文章点赞的功能,实现后的样式如下,点赞后的文章下面的大拇指图标会变红,并且点赞数加1 一开始分别遇到过两个问题:1.点文章中的一个赞,所有文章的赞全部变红了 2.点赞后,虽然当前文章的赞 ...
- 项目公共js(vue.js)
var urlHead = "http://hm.runorout.com/";// var urlHead = "/";/*加入跑班相关*/var urlGe ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- vue.js+UEditor集成 [前后端分离项目]
首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...
随机推荐
- VS2010 使用TeeChart绘图控件 - 之一 - 控件和类的导入
vs2010的用法和vc6有很大的不同,特别是在一些函数调用那里,当然.控件导入也是很不一样的 安装好控件后就可以在工程里加入teechart控件了 加入方法有如下几种: 1.添加Teechart控件 ...
- QT Creater环境搭建
需要的软件包: 1.qt-win-opensource-4.8.5-mingw.exe //Qt库 2.MinGW-gcc440_1.zip //QT编译器 3.qt-creator-opensour ...
- IDEA Spark Streaming 操作(套接字流)
import org.apache.spark.SparkConf import org.apache.spark.streaming.{Seconds, StreamingContext} obje ...
- MAC地址 初识
MAC地址 即物理地址/硬件地址 地址长度为48位,6字节. 格式为:00-23-5A-15-99-42 一个网卡对应一个MAC地址(比如笔记本,有线网卡有一个MAC地址,无线网卡也有一个MAC地址) ...
- sort与sorted的区别
描述 我们需要对List进行排序,Python提供了两个方法对给定的List L进行排序 : 方法1.用对List的成员函数sort进行排序 方法2.用内置函数sorte ...
- PCB MS SQL 标量函数与表值函数(CLR) 实现文件与目录操作
一.C#写SQL SERVER(CLR)实现文件操作 标量函数: 文件移动 ,复制,检测文件存在,写入新文件文本,读取文本,创建目录,删除目录,检测目录是否存在 /// <summary> ...
- E20171005-ts
collapse n. 垮台; (身体的) 衰弱; vt. 使倒塌; 使坍塌; 使瓦解; vi. 崩溃; 倒塌; 折叠; (尤指工作劳累后) 坐 ...
- Rails 服务器架设失败问题
更新: 2017/09/14 补充了简单的确认号码的方法 A server is already running. Check /Users/...../pids/server.pid. Exitin ...
- shopnc学习
---恢复内容开始--- 以前没有怎么接触过shopnc,感觉界面挺漂亮的,不过后来自己需要开发一个电商系统,就顺便参考了下,感觉构架垃圾的一塌糊涂.不过平时做这个系统二次开发的业务比较多,所以简单的 ...
- unity之Rigidbody属性
Rigidbody属性 Mass表示物体的质量,数值类型为float,默认值为1.大部分物体的质量属性接近于0.1才符合日常生活感官感受,超过10 ,则失去了仿真效果. Drag表示平移阻力,其数值类 ...