使用vue.js写一个tab选项卡效果
更新时间：2017年03月25日 14:43:36 作者：勇PAN高峰
Vue 实现 Tab切换实现的场景很多，比如，利用vue-router、利用第三方插件、利用组件等等.本文使用组件来实践tab选项卡
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢?
如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-active)是vue-router默认的类名,你可以自己配置更改名称.这样我们可以直接使用vue的路由功能当tab选项卡使用了.那么如果不想用路由功能呢?
那么请看下面的方法:
html部分
<div id="app">
<ul>
<li @click="toggle($index ,tab.view)" v-for="tab in tabs" :class="{active:active==$index}">
{{tab.type}}
</li>
</ul>
<component :is="currentView"></component>
</div>
js部分
Vue.component('child1', {
template: "<p>this is child1</p>"
})
Vue.component('child2', {
template: "<p>this is child2</p>"
})
new Vue({
el: "#app",
data: {
active: 0,
currentView: 'child1',
tabs: [
{
type: 'tab1',
view: 'child1'
},
{
type: 'tab2',
view: 'child2'
}
]
},
methods: {
toggle(i, v){
this.active = i
this.currentView = v
}
}
})
然后我们只需要设置一个.active的样式就可以了,比如设置一个最简单的
css
.active{
color:red
}
简易的vue.js tab 选项卡
原理很简单,我们给tab选项绑定了toggle方法,点击时让active等于其index,从而给其添加了一个active类,而显示的内容也是同样的原理．比起传统操作dom方法，这个整体看上去更简洁,不过麻烦在每个tab选项卡都是一个组件.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何通过$router.push传参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue-router传递参数分为两大类，一类是编程式的导航 router.push另一类是声明式的导航 <router-link>，本文通过实例代码给大家介绍vue-router传递参数的几种方式，感兴趣的朋友跟随小编一起看看吧2018-11-11
Vue使用wavesurfer.js实现音频可视化的示例详解
WaveSurfer.js是一个开源的音频可视化库,用于创建交互式、可定制的波形,本文将为大家简单介绍了Vue如何使用wavesurfer.js实现音频可视化功能,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
这篇文章主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文主要介绍了vue+webrtc(腾讯云) 实现直播功能的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue部署包可配置后台接口地址的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
今天小编就为大家分享一篇vuex提交state&&实时监听state数据的改变方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue中的diff算法时常是面试过程中的考点,本文将为大家讲解何为diff以及diff算法的实现过程,那么在了解diff之前,我们需要先了解虚拟DOM是什么,需要的朋友可以参考下2024-02-02
本篇文章主要给大家详细代码讲解了vue2.0 elementUI制作面包屑导航栏的过程，对此有兴趣的朋友可以学习下。2018-02-02
在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结，有需要的朋友们可以参考下。2019-08-08
最新评论