メニューをクリックするごとにメイン部の表示を切り替えるやつをVue.jsで書いてみた

よくある、アプリケーション画面でトップとかサイドにメニューがあって、それをクリックするとメイン部分に表示をする（切り替える）仕組みについて。

jQueryを使った場合、対象の要素に対して背景色のクラスを"付けたり" or "外したり"とか、.show() or .hide()で表示を切り替えたりする。と思いつくのだけれど、Vue.jsでやる場合は「状態を変える」ことによって「表示を切り替える」ことらしいので、こういう感じでやるのかなーと書いてみた。

demo

• methodsの select()でクリックしたメニューのIDを保持
• メニューの背景色を選択色に変えたり、表示の切り替えを methodsのisSelected({ID})で判定している。

次は、メニュー部とコンテンツ部をファイルに分けて（コンポーネントごとに切り出して）、メニュー部で選択した状態をコンテンツ部にどうやって伝えるかを実装してみる。

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div id="menu">
    <ul>
      <li id="A01" v-on:click="select" v-bind:class="{selected: isSelected('A01')}">AAAAA</li>
      <li id="B01" v-on:click="select" v-bind:class="{selected: isSelected('B01')}">BBBBB</li>
    </ul>
  </div>
  <div id="contents">
    <div class="item" id="AAAAA" v-show="isSelected('A01')"><p>{{ selected }}</p> </div>
    <div class="item" id="BBBBB" v-show="isSelected('B01')"><p>{{ selected }}</p> </div>
  </div>
</div>

<script>
    var vm = new Vue({
        el: "#app",
      data : {
            selected: ""
      },
      methods: {
        select: function (event) {
          this.selected = event.target.id
        },
        isSelected: function(id){
            return this.selected === id
        }
     }
    })

</script>

#menu {
  width: 400px;
}
ul {
  list-style-type: none;
  overflow: hidden;  
}

li {
  height: 40px;
  width: 100px;
  background-color: gray;
  color: white;
  text-align: center;
  line-height: 40px;
  margin-right: 2px;
  float: left;
}

.selected {
  background-color: cyan;
  color: black;
}

#contents {
  width: 600px;
}

.item {
  width: 100%;
  height: 200px;
}

#AAAAA {
  background-color: lightsalmon;
}

#BBBBB {
  background-color: lightblue;
}