Vueのタブを切り替える方法

Vue.js では、タブ切り替えを使用して、異なるコンテンツ間を簡単に移動できます。タブは通常、ヘッダー パネルとコンテンツ パネルで構成され、ユーザーはヘッダーを選択することで別のパネルを選択できます。 Vue.js では、v-if ディレクティブと isActive 属性を使用してタブ切り替えを実装できます。基本的なタブ コンポーネントの例を次に示します:

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{ active: tab.isActive }" @click="selectedTab = tab">
        {{ tab.name }}
      </li>
    </ul>

    <div v-for="(tab, index) in tabs" :key="index" v-if="tab.isActive">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [
          { name: 'Tab 1', content: 'Content for Tab 1', isActive: true },
          { name: 'Tab 2', content: 'Content for Tab 2', isActive: false },
          { name: 'Tab 3', content: 'Content for Tab 3', isActive: false }
        ]
      }
    },
    
    computed: {
      selectedTab() {
        return this.tabs.find(tab => tab.isActive);
      }
    },
    
    methods: {
      selectTab(tab) {
        this.tabs.forEach(tab => tab.isActive = false);
        tab.isActive = true;
      }
    }
  }
</script>

上記のコードでは、まずタブ情報を含む配列 tabs を定義します。各タブには名前、内容、およびブール値があります。isActive は、タブが選択されています。また、現在選択されているタブ オブジェクトを取得するために使用される計算属性 selectedTab も定義します。

次に、テンプレート内で v-for ディレクティブを使用してすべてのタブのヘッダーをレンダリングし、isActive 属性に基づいて現在のタブが選択されているかどうかを判断します。また、@click イベント リスナーをヘッダー要素に追加しました。これは selectTab メソッドを呼び出し、現在のタブ オブジェクトをパラメーターとして渡します。

コンテンツ パネル セクションでは、再び v-for ディレクティブを使用してすべてのタブのコンテンツをレンダリングし、v-if ディレクティブを使用して isActive 属性に基づいて現在のパネルを表示するかどうかを決定します。

最後に、メソッド オブジェクトで、ユーザーがタブ ヘッダーをクリックしたときにタブのステータスを更新するために使用される selectTab メソッドを定義します。このメソッドは、最初にすべてのタブの isActive プロパティを false に設定し、次に選択したタブの isActive プロパティを true に設定します。

上記のコードを使用すると、タブ コンポーネントをすばやく実装できますが、これは単なる基本的な実装であり、アニメーション効果やスロット コンテンツの追加など、必要に応じて変更および拡張できます。

以上がVueのタブを切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。