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 相关文章推荐
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
C++中的string类的用法小结
Aug 07 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
js实现双色球效果
Aug 02 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php简单的会话类代码
2011/08/08 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php建立Ftp连接的方法
2015/03/07 PHP
php判断当前操作系统类型
2015/10/28 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
利用Python计算KS的实例详解
2020/03/03 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
STP的判定过程
2012/10/01 面试题
体育老师的教学自我评价分享
2013/11/19 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
护士医德考评自我评价
2015/03/03 职场文书
安全教育主题班会教案
2015/08/12 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers