vue.js实现标签页切换效果


Posted in Javascript onJune 07, 2018

第二个实例是关于标签页切换的,先看一下效果:

vue.js实现标签页切换效果

这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样:

vue.js实现标签页切换效果

那么用vue.js实现上述的效果,其实也有两种途径,一种使用vue-routervue-routervue.js的一个路由组件,在单页面应用中非常非常流行,如果切换的层数据量非常大的话,比如每个层都要有服务器进行大量的数据交互,那么强烈建议使用vue-router,因为vue-router在每次切换路由的过程中,都会自动销毁(destroyed)前面的组件,这样在频繁的操作中页面也不会卡,而且vue-router也定义了页面切换过程中的过渡动画。

如果数据量并不复杂的话,可以直接通过vue.js定义切换状态来切换不同的层。

首先先把template和css写好:

vue.js实现标签页切换效果

其中introduce、chatbar、videobar分别代表三个需要跟随button切换的组件,接下来就可以给vue.js的button节点绑定事件来操控点击状态:

vue.js实现标签页切换效果

vue.js实现标签页切换效果

点击不同的button,会让active的状态改变,同时这个状态会作用到button上面,比如让被点击的button有个高亮的效果等等。

那么如何让active的状态作用到弹出层呢?其实定义一个computed函数就可以了:

vue.js实现标签页切换效果

vue.js实现标签页切换效果

总结

以上所述是小编给大家介绍的vue.js实现标签页切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
js数组去重的N种方法(小结)
Jun 07 #Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 #Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 #Javascript
vue实现简单loading进度条
Jun 06 #Javascript
security.js实现的RSA加密功能示例
Jun 06 #Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 #Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 #Javascript
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php实现微信公众号无限群发
2015/10/11 PHP
非主流的textarea自增长实现js代码
2011/12/20 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
关于反爬虫的一些简单总结
2017/12/13 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
法学毕业生自我鉴定
2013/11/08 职场文书
团组织关系介绍信
2014/01/12 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
海飞丝的广告词
2014/03/20 职场文书
同事去世追悼词
2015/06/23 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android