【vue.js】クリックしたら表示と非表示を切り替える

今回はVue.jsを使ってクリックしたときに表示と非表示を切り替える処理を作る方法を紹介していきたいと思います。

ボタンとかを押したら表示したり非表示にしたりといった処理はよく使うと思います。

イメージとしてはアコーディオンのようなものですね。

クリックしたら表示と非表示を切り替える

html

<div id="app">
        <accordion></accordion>
</div>

js

インスタンスを生成します。

new Vue({
  el: '#app'
});
</script>

次はhtml部分をtemplateに記述していきます。

Vue.component('accordion', {
  template: `
  <div class="accordion" v-cloak>
    <div class="accordion-item" :class="{ 'acopen': acOpen }" @click="accordionBtn()">
      ボタン
    </div>
    <ul class="accordion-cont" :class="{ 'acopen': acOpen }" v-if="acOpen">
      <li><a href="#">リンク1</a></li>
      <li><a href="#">リンク2</a></li>
      <li><a href="#">リンク3</a></li>
      <li><a href="#">リンク4</a></li>
    </ul>
  </div>
  `,
  data() {
    return {
      acOpen: false
    };
  },
  methods: {
    accordionBtn: function(){
      this.acOpen = !this.acOpen;
    },
  }
});

「ボタン」をクリックすると関数の「accordionBtn」が実行され表示と非表示を切り替えます。

クラスがついたり外れたりするの表示と非表示のときにスタイルをそれぞれあてることもできると思います。

サンプル

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。