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游戏之优化篇
Nov 08 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
关于PHP中Object对象的笔记分享
2011/06/28 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
python运行其他程序的实现方法
2017/07/14 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python中树与树的表示知识点总结
2019/09/14 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
基于python3的socket聊天编程
2020/02/17 Python
Django用户身份验证完成示例代码
2020/04/03 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
JAVA高级程序员面试题
2013/09/06 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
校园广播稿精选
2014/10/01 职场文书
教研活动主持词
2015/07/03 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS