vue 組件式開發tabControl

原创于 2019-12-04 12:01:21 发布

· 138 阅读

0 ·

版权

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

29 篇文章

订阅专栏

本文介绍如何在 Vue.js 中实现 tab 切换功能，通过 TabControl 组件的开发，详细展示了如何利用 v-for 和 @click 实现 tab 的动态渲染及点击事件处理。文章深入探讨了 currentIndex 的变化如何影响 tab 的激活状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

經常在頁面會使用tab切換，如下為tabcontrol組件開發


//點擊的時候當前的index 傳給方法然後顏色變化
  <div class="tab-control">
    <!-- if you click the first tab ,index =0, -->
    <div v-for="(item,index) in title" @click="tabClick(index)" class="tab-control-item" :class="{active:index === currentIndex}">
      <span>{{item}}</span>
    </div>
  </div>


 methods:{
    tabClick(index){
      console.log(index)
      this.currentIndex=index
    }
  }