Vue实现active点击切换方法


Posted in Javascript onMarch 16, 2018

循环的情况:

1、点击时传入index索引(获取当前点击的是哪个)

@click="active(index)"

2、将索引值传入class(索引等于几就第几个添加active类)

:class="{active:index==ins}"

3、在data里边添加ins:0(表示默认第一个添加active类)

data{ ins:0 }

4、最后在methods里边添加方法

ctive (num) {
this.ins=num
}

非循环的情况:

1、在标签内写入点击事件和添加的class样式

Vue实现active点击切换方法

注释: :class="{active:shows==1}"就是说当shows==1时添加class=active,否则不添加。

2、在methods里边定义方法

Vue实现active点击切换方法

效果如下:

Vue实现active点击切换方法

到此就完成了点击切换效果。

附加:

使用三木运算符实现筛选箭头切换

Vue实现active点击切换方法

以上这篇Vue实现active点击切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
jQuery实现大图轮播
Feb 13 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
微信小程序日历效果
Dec 29 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 #Javascript
vue实现tab切换外加样式切换方法
Mar 16 #Javascript
javaScript中"=="和"==="的区别详解
Mar 16 #Javascript
node.js博客项目开发手记
Mar 16 #Javascript
vue iView 上传组件之手动上传功能
Mar 16 #Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 #Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 #Javascript
You might like
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
党校自我鉴定范文
2013/10/02 职场文书
社区党务公开实施方案
2014/03/18 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
微信搭讪开场白
2015/05/28 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis