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

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

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

那么用

vue.js

实现上述的效果，其实也有两种途径，一种使用

vue-router

，

vue-router

是

vue.js

的一个路由组件，在单页面应用中非常非常流行，如果切换的层数据量非常大的话，比如每个层都要有服务器进行大量的数据交互，那么强烈建议使用

vue-router

，因为

vue-router

在每次切换路由的过程中，都会自动销毁（destroyed）前面的组件，这样在频繁的操作中页面也不会卡，而且

vue-router

也定义了页面切换过程中的过渡动画。

如果数据量并不复杂的话，可以直接通过

vue.js

定义切换状态来切换不同的层。

首先先把template和css写好：

其中introduce、chatbar、videobar分别代表三个需要跟随button切换的组件，接下来就可以给

vue.js

的button节点绑定事件来操控点击状态：

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

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

总结

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

您可能感兴趣的文章:

• Vue.js实现微信过渡动画左右切换效果
• vue.js 左侧二级菜单显示与隐藏切换的实例代码
• Vue.js tab实现选项卡切换
• Vue.js组件tab实现选项卡切换
• Vue.js组件tabs实现选项卡切换效果