vue 組件式開發tabControl

最新推荐文章于 2024-04-21 21:55:54 发布

原创最新推荐文章于 2024-04-21 21:55:54 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

29 篇文章

订阅专栏

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

經常在頁面會使用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
    }
  }