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 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
详解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实现mysql同步的实现方法
2009/10/21 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript prototype 使用介绍
2013/08/29 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
关于Django外键赋值问题详解
2017/08/13 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
解决python 找不到module的问题
2020/02/12 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
安全环保演讲稿
2014/08/28 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
在校生证明
2015/06/17 职场文书
中秋节祝酒词
2015/08/12 职场文书
2017春节晚会开幕词
2016/03/03 职场文书