这篇文章给大家分享的是有关vue。js如何实现标签页切换效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
第二个实例是关于标签页切换的,先看一下效果:
这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个按钮上面,这样就可以用:检查伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样:
那么用<代码> vue.js 实现上述的效果,其实也有两种途径,一种使用<代码> vue-router ,<代码> vue-router 是<代码> vue.js> vue-router> vue-router> vue-router>
如果数据量并不复杂的话,可以直接通过<代码> vue。js代码定义切换状态来切换不同的层。
首先先把模板和css写好:
其中介绍,chatbar, videobar分别代表三个需要跟随按钮切换的组件,接下来就可以给<代码> vue。js代码的按钮节点绑定事件来操控点击状态:
点击不同的按钮,会让积极的状态改变,同时这个状态会作用到按钮上面,比如让被点击的按钮有个高亮的效果等等。
那么如何让积极的状态作用到弹出层呢?其实定义一个计算函数就可以了:
感谢各位的阅读!关于“vue.js如何实现标签页切换效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
