Vue.jsによるタブ切り替えのサンプル (スタンダードなUIからVueに慣れる)

Vue.jsでタブの切り替えを実装してみた。

社内でVue.jsに移行する場合、今までjQueryで実装できてたものが作れなくなるのは困る。
よく使うUIの一つにタブの切り替えがあるので、今回はVue.jsでタブの切り替えを実装してみた。
まずはスタンダードなUIがVue.jsでも実装できる事を体感してメリットを感じれば、Vueへの移行に対して心理的ハードルが下がると思う。

CSS

CSSについては説明割愛

.tab-list {
  overflow: hidden;
}
.tab-list > .tab-list-item {
  display: inline-block;
  line-height: 40px;
  width: 120px;
  text-align: center;
  cursor: pointer;
  background: #eee;
  transition: 0.3s;
  border-radius: 10px 10px 0 0;
}
.tab-list > input {
  display: none;
}
.tab-list > input:checked + label,
.tab-list > label:hover {
  background: #56B4BE;
  color: #fff;
}
.tab-target-contents {
  width: 500px;
  height: 100px;
  margin: 0;
  padding: 10px;
  border: 1px solid #eee;
  border-top: 2px solid #56B4BE;
  list-style: none;
}
.text {
  font-size: 14px;
  margin: 0;
}

HTML

v-ifディレクティブで条件分岐分岐をしてタブを切り替えている。
v-ifディレクティブについては、公式サイトの条件付きレンダリングを参照。

ラジオボタンのv-model="isActive"とvalueの値でどのタブを表示させるか判定させている。
v-modelを使用したデータバインディングについてはフォーム入力バインディングを参照。

<div id="tabApp">
    <div class="tab-list">
        <input type="radio" value="1" id="tab1" v-model="isActive">
        <label for="tab1" class="tab-list-item">タブ1</label>
        <input type="radio" value="2" id="tab2" v-model="isActive">
        <label for="tab2" class="tab-list-item">タブ2</label>
        <input type="radio" value="3" id="tab3" v-model="isActive">
        <label for="tab3" class="tab-list-item">タブ3</label>
    </div>
    <ul class="tab-target-contents">
        <li v-if="isActive === '1'">
            <p class="text">
            テスト本文1テスト本文1テスト本文1テスト本文1テスト本文1テスト本文1<br>
            テスト本文1テスト本文1テスト本文1テスト本文1テスト本文1テスト本文1</p>
        </li>
        <li v-else-if="isActive === '2'">
            <p class="text">
            テスト本文2テスト本文2テスト本文2テスト本文2テスト本文2テスト本文2<br>
            テスト本文2テスト本文2テスト本文2テスト本文2テスト本文2テスト本文2</p>
        </li>
        <li v-else-if="isActive === '3'">
            <p class="text">
            テスト本文3テスト本文3テスト本文3テスト本文3テスト本文3テスト本文3<br>
            テスト本文3テスト本文3テスト本文3テスト本文3テスト本文3テスト本文3</p>
        </li>
    </ul>
</div>

JavaScript

大規模な開発では$npm install vueでvueをインストールするといいみたいだけど、
今回はCDNで簡易的に実装した。

<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue ({
    el: '#tabApp',
    data: {
        isActive: '1',
    }
});
</script>

まとめ

Vueを使ってタブの切り替えを実装すると改行入れても6行で実装が完了する。
HTML側にisActiveで条件分岐を入れるのがはじめは気持ち悪いかもしれないけど、すぐに慣れるんじゃないかなと思う。