解决vue点击控制单个样式的问题


Posted in Javascript onSeptember 05, 2018

既然是控制单个样式,我们的html里面的内容一定是v-for="";渲染出来,一定要养成一个好习惯,v-for="(item,index) in items";index就是我们所说的索引。

<div class="border" v-for="(item,index) in tolos" :key="index">

我做的项目类似于微信朋友圈,弹出赞与评论按钮,点击一个全体都会弹出;我们要解决的就是点一个只弹出对应的一个,对button按钮对应其中的INDEX。

这个index对应着v-for中的index;

由于公司开发的后台是c#必须用两个@@来调用click事件,函数clickBt的函数内容是:

<div @@click="clickBt(index)" class="clickBt"><i class="fa fa-envelope fa-lg message"></i></div>

在data里面定义了activeindex

// clickBt: function (index) {
// var _this = this;
// console.log(111,index);
// _this.activeindex = index;
// _this.clickTf = !_this.clickTf;
// },

最后是在我们需要弹出的div里面写v-class:与v-if相互调用:

<div class="clickDiv" v-bind:class="{'slide':clickTf}" v-if="index == activeindex">

不BB其他的哦,只希望以后遇到同样的问题,能够自己解决吧!

以上这篇解决vue点击控制单个样式的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js完美的div拖拽实例代码
Jan 22 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
浅谈webpack4.x 入门(一篇足矣)
Sep 05 #Javascript
vuejs点击class变化的实例
Sep 05 #Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 #Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
You might like
php2html php生成静态页函数
2008/12/08 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
python 实现插入排序算法
2012/06/05 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
答题辅助python代码实现
2018/01/16 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
小学教学随笔感言
2014/02/26 职场文书
百日安全活动总结
2014/05/04 职场文书
支部书记四风对照材料
2014/08/28 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2014年民政工作总结
2014/11/26 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫