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实现标签页切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍一下Vue3动态面包屑是如何实现的，实现思路又是什么，以及发给大家介绍一下面包屑的功能，文章通过代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
目前Vue3.0是会兼容大部分2.x的语法,下面这篇文章主要给大家介绍了关于Vue3.x项目开发的一些常用知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue动态添加路由后刷新页面白屏问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue input标签通用指令校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue中axios利用blob实现文件浏览器下载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了nuxt 自定义 auth 中间件实现令牌的持久化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
下面小编就为大家分享一篇解决vue多个路由共用一个页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue如何实现Json格式数据展示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在Vue.js开发中,我们经常需要创建可复用的组件,这些组件可能会有自己的样式规则,而有时我们希望父组件能够影响子组件的样式,本文将详细介绍如何使用v-deep以及一些相关的最佳实践,需要的朋友可以参考下2024-10-10
最新评论