【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をはじめたときにこの本で勉強しました。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

vue.js
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました