こんにちは！
アウラの河野です。

今回は制作中の案件で、タブメニューで表示を切り替える仕様があり、
簡単に作成する方法が見つかりましたので、ご紹介いたします。

まずはマークアップから

 <div id="contents">
    <div class="tab_box">
      <ul class="tab_list">
        <li>タブ1</li>
        <li>タブ2</li>
        <li>タブ3</li>
      </ul>
      <ul class="article">
        <li>ダミーテキスト1</li>
        <li>ダミーテキスト2</li>
        <li>ダミーテキスト3</li>
      </ul>
    </div>
  </div>

ざっと、適当なマークアップとなっていますが。
上の「tab_list」とクラス名があるのが、メニューボタン箇所。
下の「article」と書かれているのが、メニューのボタンごとに切り替わりたいコンテンツとなります。

次はCSSで装飾！

  .tab_list {
    overflow: hidden;
  }
  .tab_list li {
    float: left;
    padding: 10px 20px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: .3s;
  }
  .tab_list li:not(:first-child) {
    border-left: none;
  }
  .tab_list li.active, {
    background-color: #000;
    border-color: #000;
    color: #fff;
    cursor: auto;
  }
  .article{
    overflow: hidden;
    margin-top: -1px;
  }
  .article li {
    width: 320px;
    padding: 20px;
    border: 1px solid #ccc;
  }

ここで肝となるのが、
ボタンと連動して、本文に「active」というクラスが付与されればOK。
「active」がついていなければ、表示を消すという仕組みです。

で、最後にvue.jsで記載すれば完了です！

記述はたったこれだけ！

new Vue({
  el: '#contents',
  data: {
    isActive: '1'
  },
  methods: {
    change: function(num){
      this.isActive = num
    }
  }
})

次はマークアップを少しカスタマイズしていきます。

 <div id="contents">
    <div class="tab_box">
      <ul class="tab_list">
        <li v-on:click="change('A')" v-bind:class="{'active': isActive === 'A'}">タブ1</li>
        <li v-on:click="change('B')" v-bind:class="{'active': isActive === 'B'}">タブ2</li>
        <li v-on:click="change('C')" v-bind:class="{'active': isActive === 'C'}">タブ3</li>
      </ul>

      <ul class="article">
        <li v-if="isActive === 'A'">ダミーテキスト1</li>
        <li v-else-if="isActive === 'B'">ダミーテキスト2</li>
        <li v-else-if="isActive === 'C'">ダミーテキスト3</li>
      </ul>
    </div>

  </div>

v-on:clickで、変更したものに「active」というクラスの受け渡しを行い、
動的に本文の表示・非表示を切替ています。

少ないコードで、軽量に実装できるので、とても便利でした！

サンプルはこちら

See the Pen
xNpKXj by 河野励 (@aura_kouno)
on CodePen.