1534 回閲覧されました

公開日 : 2021年7月23日
最終更新日 : 2024年9月1日

Vue.jsでタブを作るときに何度理解してもすぐ忘れる私のための解説です。

他人がこの記事を読んでも理解できるように解説するつもりです。

デモは↓になります。

完成形のコードは↓です。

それではコードの解説をします。

タブ1、タブ2、タブ3をクリックした時ですが4行目、5行目、6行目でv-onディレクティブを使っています。

メソッド（select(‘ 1 ‘)、select(‘ 2 ‘)、select(‘ 3 ‘)のこと）の中身は24行目〜26行目にあります。

select(‘ 1 ‘)、select(‘ 2 ‘)、select(‘ 3 ‘)の1、2、3が24行目のnumに入って25行目で使っています。

これでクリックするタブができたので次はタブの中身を作ります。

タブの中身は9行目、10行目、11行目です。

4行目、5行目、6行目のselect(‘ 1 ‘)、select(‘ 2 ‘)、select(‘ 3 ‘)の1、2、3で表示する内容を切り分けたいのでv-ifディレクティブとv-showディレクティブを使います。

タブの中身ですが最初はタブ1の中身を表示したいので20行目のactiveを’ 1 ‘にしています。（他のタブを最初に表示したかったら数字を2か3にしてください）

これでvue.jsでのタブの完成です。