Vue实现active点击切换
Vue实现active点击切换
循环的情况:
1、点击时传入index索引(获取当前点击的是哪个)
@click=“active(index)”
2、将索引值传入class(索引等于几就第几个添加active类)
:class="{active:index==ins}"
3、在data里边添加ins:0(表示默认第一个添加active类)
data{ ins:0 }
4、最后在methods里边添加方法
active(num) {
this.ins=num
}
非循环的情况:
1、在标签内写入点击事件和添加的class样式
注释: :class="{active:shows1}"就是说当shows1时添加class=active,否则不添加。
2、在methods里边定义方法
效果如下:
到此就完成了点击切换效果。
附加:
使用三木运算符实现筛选箭头切换三木运算符执行方法:如果show==1为真,则显示icon_up.png,否则显示icon_down.png
Vue实现active点击切换的更多相关文章
- Vue实现active点击切换样式
1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key ...
- vue 实现active点击图片切换
循环条件下: 1.点击函数@click="active(index)" 获取点击的位置 2.讲索引值传给class,点击哪一个则显示哪一个的样式 3.在data添加ins的初始值 ...
- vue点击切换颜色限制个数(用了mui框架)
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- jquery 点击切换div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
- 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...
随机推荐
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- 使用穷举法结合numpy解决八皇后问题
一般说到八皇后问题,最先想到的就是回溯思想,而回溯思想往往是需要递归来实现的. 计算机很善长做重复的事情,所以递归正和它的胃口,而我们人脑更喜观平铺直叙的思维方式.当 我们看到递归时,总想把递归平铺展 ...
- 【PowerOJ1752&网络流24题】运输问题(费用流)
题意: 思路: [问题分析] 费用流问题. [建模方法] 把所有仓库看做二分图中顶点Xi,所有零售商店看做二分图中顶点Yi,建立附加源S汇T. 1.从S向每个Xi连一条容量为仓库中货物数量ai,费用为 ...
- 关于Java协变性的思考
简而言之,如果A IS-A B,那么A[] IS-A B[]. 举例:现在有类型Person.Employee和Student.Employee 是一个(IS-A) Person,Student是一个 ...
- canvas万花筒案例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Ti ...
- tab下图表展示宽高为0的问题
tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高.在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个ta ...
- 安装python是提示 0x80072f7d 错误的解决办法
最简单的方法: Internet 选项-> 高级里面 勾选使用TLS1.1和使用TLS1.2即可.实际测试是ok的
- 转)delphi chrome cef3 控件学习笔记 (二)
(转)delphi chrome cef3 控件学习笔记 (二) https://blog.csdn.net/risesoft2012/article/details/51260832 原创 2016 ...
- 40 insert语句的锁
40 insert语句的锁 上一篇文章中对mysql自增主键锁做了优化,尽量在申请到自增id后,就释放自增锁. 因此,insert语句是一个很轻量的操作,不过,这个结论对于”普通的insert”才生效 ...
- Selenium WebDriver 数据驱动测试框架
Selenium WebDriver 数据驱动测试框架,以QQ邮箱添加联系人为示例,测试框架结构如下图,详细内容请阅读吴晓华编著<Selenium WebDiver 实战宝典>: Obje ...