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 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
javascript 写类方式之三
2009/07/05 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
webpack配置之后端渲染详解
2017/10/26 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python字典简介以及用法详解
2016/11/15 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
买房子个人收入证明
2014/01/16 职场文书
迎新晚会邀请函
2014/02/01 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
经理任命书模板
2014/06/06 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2014年个人售房协议书
2014/10/30 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android