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 ...
随机推荐
- 2017iOS开发最新的打包测试步骤(亲测)
最近也是忙着修改项目,今天把最近遇到的问题和知识给大家分享一下. 有时候我们需要将我们的项目发给测试组进行bug测试,这时候我们就需要把自己的项目打包,生成一个二维码或者链接的形式,给测试组,接下来就 ...
- UVALive 4671 K-neighbor substrings 巧用FFT
UVALive4671 K-neighbor substrings 给定一个两个字符串A和B B为模式串.问A中有多少不同子串与B的距离小于k 所谓距离就是不同位的个数. 由于字符串只包含a和 ...
- 7.2 高速缓冲存储器-Cache
高速缓冲存储器:Cache.Cache的功能是提高CPU数据的输入和输出的速率.CPU的速度与主存的速度之间有巨大的差异.主存的存取时间.存取速度要比CPU的速度要慢了很多倍.为了调和它们之间的巨大速 ...
- compileSdkVersion, minSdkVersion 和 targetSdkVersion的选择(copy)
英文原文:Picking your compileSdkVersion, minSdkVersion, and targetSdkVersion 作者:Ian Lake,Google Android ...
- 【TODO】Ruby Range类
创建: 2017/10/28 Range类 ...
- P3194 [HNOI2008]水平可见直线
传送门 我们把所有的直线按斜率从小到大排序,然后用单调栈维护 发现,如果当前直线与\(st[top-1]\)直线的交点的横坐标大于等于与\(st[top]\)的交点的横坐标,当前直线可以覆盖掉\(st ...
- Django day26 初识认证组件
一:什么是认证组件 只有认证通过的用户才能访问指定的url地址,比如:查询课程信息,需要登录之后才能查看,没有登录,就不能查看,这时候需要用到认证组件 二:认证组件源码分析
- UNIX环境高级编程--5
标准I/O库流和FILE对象: 所有I/O函数都是围绕文件描述符的.当打开一个文件时,即返回一个文件描述符,然后该文件描述符就用于后续的I/O操作.当用标准I/O库打开或者创建一个文件时,我们已 ...
- UNIX环境高级编程--2
UNIX标准及实现 ISO C: 国际标准化组织(International Organization for standardization , ISO)ISO C标准的意图是提供C程序的可移植性, ...
- sql语句优化:用join取代not in
不要太多使用not in查询,最好用表连接来取代它.如: select ID,name from Table_A where ID not in (select ID from Table_B) 这句 ...