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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
Angular单元测试之事件触发的实现
Jan 20 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
python非递归全排列实现方法
2017/04/10 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
基于python实现百度翻译功能
2019/05/09 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
用python进行视频剪辑
2020/11/02 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
高中毕业自我评价
2014/02/08 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
素质教育标语
2014/06/27 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
图神经网络GNN算法
2022/05/11 Python