第二个例子是关于选项卡切换。我们先来看看效果：

这也是很常见的互动效果。过去，正常的javascript编写是绑定每个按钮来切换不同的层。当然也可以用纯css编写，在上面三个切换的图层上增加一个单选按钮兄弟节点，然后用绝对定位将单选按钮定位在三个按钮上，这样就可以用：checked伪类来单选按钮兄弟元素，也就是对应不同的图层。我只是编写了DOM结构，大概是这样的：

用vue.js实现上述效果其实有两种方式，一种是使用vue-router，vue-router是vue.js的路由组件，在单页应用中非常流行。如果交换层的数据量很大，比如每一层都需要与服务器进行大量的数据交互，强烈建议使用vue-router。因为vue-router会在每次切换路由的过程中自动销毁之前的组件，这样页面就不会在频繁的操作中卡住，而且vue-router还定义了页面切换过程中的过渡动画。

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

先写模板和css:

介绍一下，chatbar和videobar代表三个需要用button进行切换的组件，然后可以将事件绑定到vue.js的button节点来控制点击状态：

点击不同的按钮会改变激活的状态，同时这种状态会作用于按钮，比如让被点击的按钮有高亮效果等等。

那么如何让活动状态作用于弹出层呢？事实上，定义一个计算函数就足够了：

摘要

以上是边肖介绍的vue.js的标签切换效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！