タブパネル・タブ切り替えを実現するコード（Vue.js）

更新日：2023.2.13

配列を使わない方法（ちょっと冗長）

See the Pen Untitled by Wentertainment (@wenterme) on CodePen.

• Vue.jsで配列を使わずタブ切り替え（タブパネル）を実現するコード。
• 選択中のタブを判定する変数を用意し、タブをクリックした時に「@click」で変数の値を変更するメソッドを走らせる。
• 各タブ内のコンテンツは、「v-show」で表示を切り替える。
• この例では使っていないが、Vueのtransitionを入れると、タブ切り替え時のアニメーションを簡単に実装できる。
• ちょっと冗長な書き方。↓の配列を使った方法の方がよりスマート(?🤔)

配列を使う方法

See the Pen Untitled by Wentertainment (@wenterme) on CodePen.

• Vue.jsで配列を使ってタブ切り替え（タブパネル）を実現するコード。
• タブとタブ内のコンテンツはそれぞれ配列として、script内に記述する。
• HTMLには、v-forでタブとコンテンツをそれぞれ表示させる。
• 選択中のタブを判定する変数を用意し、タブをクリックした時に「@click」で変数の値を変更するメソッドを走らせる。
• 各タブ内のコンテンツは、script内のcomputedにてフィルターをかけて表示させる。（tabfilteredItems）
• タブやコンテンツが増えた際は、配列に追加していくだけでHTMLに表示されるので、この方法の方が管理が楽で好き🙆‍♂️
• CSSのみでタブ切り替え（タブパネル）を実装する方法はこちらのページで紹介しています。
• フリー素材。ご自由にお使いください。