当前位置：首页 > VUE

vue.js实现tab

2026-01-20 11:51:19VUE

Vue.js 实现 Tab 切换功能

在 Vue.js 中实现 Tab 切换功能可以通过动态组件或条件渲染实现。以下是两种常见方法：

动态组件实现

通过 <component> 结合 v-bind:is 动态切换组件：

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      currentTab: 'Home'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase() + '-tab'
    }
  }
}
</script>

条件渲染实现

使用 v-if/v-else-if 根据当前选中状态显示不同内容：

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>

    <div class="tab-content">
      <div v-if="currentTab === 'home'">
        Home content
      </div>
      <div v-else-if="currentTab === 'about'">
        About content
      </div>
      <div v-else>
        Contact content
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'home', label: 'Home' },
        { name: 'about', label: 'About' },
        { name: 'contact', label: 'Contact' }
      ],
      currentTab: 'home'
    }
  }
}
</script>

样式处理

为 Tab 添加基础样式：

.tabs {
  display: flex;
  margin-bottom: 1rem;
}

.tabs button {
  padding: 8px 16px;
  margin-right: 4px;
  background: #eee;
  border: none;
  cursor: pointer;
}

.tabs button.active {
  background: #ddd;
  font-weight: bold;
}

.tab-content {
  padding: 16px;
  border: 1px solid #ddd;
}

使用 Vue Router 实现

对于更复杂的应用，可以使用 Vue Router 实现页面级 Tab：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

然后在模板中使用 <router-link>：

<router-link 
  v-for="tab in tabs" 
  :key="tab.path" 
  :to="tab.path"
  active-class="active"
>
  {{ tab.name }}
</router-link>
<router-view></router-view>

以上方法可以根据具体需求选择使用，简单交互推荐条件渲染，组件化程度高的项目推荐动态组件，页面级导航推荐 Vue Router。

vue.js实现tab