Vue を使用してタブ バーの切り替え機能を実装する方法を段階的に説明します。

フロントエンド テクノロジの継続的な開発により、Vue は最も人気のある JavaScript フレームワークの 1 つになりました。 Vue の登場により、フロントエンド開発がよりシンプルかつ効率的になりました。 Vue では、ディレクティブとコンポーネントを通じて複雑なインターフェイスを構築できます。その中でもタブバーはWebサイトのナビゲーションバーやタブに表示されることが多いのですが、本記事ではVueを使ってタブバーの切り替えを実装する方法を紹介します。

1. Vue プロジェクトを作成する

まず、Vue CLI をインストールし、次のコマンドを実行する必要があります:

npm install -g vue-cli

次に、新しいプロジェクトを作成し、次のコマンドを実行します。

vue init webpack my-tab

このコマンドは、「my-tab」という名前の新しいプロジェクトを作成します。プロジェクトが正常に作成されたことを確認したら、プロジェクトフォルダーに入ってください。

2. タブ コンポーネントの作成

src/components ディレクトリに「tabs」という名前のフォルダーを作成し、左側に 2 つのタブ リストと右側にコンテンツ領域を作成します。それぞれ「tab-header」と「tab-pane」という名前が付けられます。

タブヘッダーコンポーネントでは、v-for ディレクティブを使用してタブリストをループする必要があります。コードは次のとおりです。

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}">
        <a href="#" @click="changeTab(index)">{{tab}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['tabs'],
    data () {
      return {
        currentIndex: 0
      }
    },
    methods: {
      changeTab (index) {
        this.currentIndex = index
        this.$emit('tab-change', index)
      }
    }
  }
</script>

このコンポーネントは、props を使用して親コンポーネントから渡されたタブ リスト データを受け取り、v-for 命令を使用してリストをループし、現在のインデックスに従って currentIndex の値を変更します。選択されたタブと、「tab-change」と呼ばれるカスタム イベントをトリガーします。

タブペインコンポーネントでは、currentIndex の値に基づいてどのコンテンツ領域をレンダリングするかを決定する必要があります。コードは次のとおりです。

<template>
  <div>
    <div v-for="(pane, index) in panes" :key="index" v-show="currentIndex === index">
      {{ pane }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['panes', 'currentIndex'],
  }
</script>

このコンポーネントは、ペインと currentIndex という 2 つのプロパティを受け入れ、v-for 命令を使用してペインをループし、currentIndex の値に従って対応するコンテンツ領域を表示します。これらのコンテンツ領域には、p タグ、img タグなどの任意の要素を使用できます。

3. 親コンポーネントでタブ コンポーネントを使用する

親コンポーネントでは、データをタブヘッダー コンポーネントとタブペイン コンポーネントに渡し、ユーザーの選択に基づいて決定する必要があります。 currentIndexタブの値。

<template>
  <div>
    <tab-header :tabs="tabs" @tab-change="tabChange"></tab-header>
    <tab-pane :panes="panes" :currentIndex="currentIndex"></tab-pane>
  </div>
</template>

<script>
  import TabHeader from './tabs/tab-header'
  import TabPane from './tabs/tab-pane'

  export default {
    data () {
      return {
        tabs: ['Tab1', 'Tab2', 'Tab3'],
        panes: ['Content1', 'Content2', 'Content3'],
        currentIndex: 0
      }
    },
    components: {
      TabHeader,
      TabPane
    },
    methods: {
      tabChange (index) {
        this.currentIndex = index
      }
    }
  }
</script>

親コンポーネントでは、タブヘッダーコンポーネントとタブペインコンポーネントをそれぞれインポートし、ローカルコンポーネントとして登録する必要があります。さらに、タブ、ペイン、currentIndex という 3 つのデータ項目を定義し、必要に応じて値を割り当てる必要もあります。最後に、テンプレート内のタブ ヘッダー コンポーネントとタブ ペイン コンポーネントを使用して、カスタム イベントをバインドします。

これは、ニーズに応じて変更および拡張できる簡単な例です。この時点で、Vue を使用してタブを切り替えるプロセスは完了しました。

以上がVue を使用してタブ バーの切り替え機能を実装する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。