使用vue.js写一个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.js实现选项卡 # vue.js选项卡 # vue # tab选项卡 # vue实现选项卡及选项卡切换效果 # Vue.js组件tabs实现选项卡切换效果 # vue插件tab选项卡使用小结 # Vue.js组件tab实现选项卡切换 # vue中选项卡点击切换且能滑动切换功能的实现代码 # vuejs实现标签选项卡动态更改css样式的方法 # Vue.js tab实现选项卡切换 # vue动态组件实现选项卡切换效果 # vue中用动态组件实现选项卡切换效果 # vue实现简易选项卡功能 # 选项卡 # 都是 # 只需要 # 路由功能 # 你可以 # 不去 # 我们可以 # 很简单 # 该如何 # 定了 # 最简单 # 想用 # 于其 # 使用过 # 你会发现 # 大家多多 # 移除 # 就可以 # 给其 # 使用了

返回目录在线咨询

上一篇：AI模型训练如何实现目标检测的完整流程【教程】
下一篇：如何在VSCode中创建和配置一个新的网站项目？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

使用vue.js写一个tab选项卡效果

您的项目需求