owned mediaウェブ制作に役立つコンテンツを発信中!

Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する

今回はVue.jsのコンポーネント内でトグル機能を実装する方法をまとめていきたいと思います。一般的なウェブサイトやアプリケーションでもよく見かける機能で、jQueryを使う場合やDOMの操作でclassを切り替えるなどでも実装してきた例もあるかと思いますが、Vue.jsの場合にはこれまでと少し異なるので、ぜひ覚えておきましょう。では早速コードを見ていきます。 【Vue】
<template>
 <div id="app">
  <button v-on:click="toggle_switch()">Toggle Button</button>
  <p v-if="isActive === false">初期表示の内容
  </p>
  <p v-else>クリックで切り替わった内容
  </p>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    isActive: false
   }
  },
  methods: {
   toggle_switch: function() {
    this.isActive = !this.isActive
   }
  }
 }
</script>
  HTMLのテンプレート側では、クリックする要素(上記ではbutton要素)と、切り替わる内容をそれぞれ用意します。そしてスクリプトでは、「data」オプションで切り替わる時の状態を表す値を入れておきます。続いて「methods」オプションで、dataオプションの値が切り替わる関数を設定しています。上記のように設定することで値が交互に切り替えることができます。   テンプレートのHTMLに戻り、クリックする要素には「v-on」ディレクティブにclickを指定します。このv-onディレクティブでイベントを設定することができます。今回はそのイベントにclickを設定しています。そして値には先ほどmethodsオプションで設定した関数を入れます。   最後に切り替わる内容に「v-if」ディレクティブを設定することで条件分岐ができるようにします。v-ifの値には当てはまる条件式を入れます。後に続く要素には「v-else」を指定することを忘れずに。   これでクリックで動的に内容が切り替わるトグル機能が実装できました。consoleなどのデバックツールで確認すると、dataオプションで設定した値が切り替わっているのがわかりますね。 Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する   ちなみにですが、「v-on」ディレクティブでイベントを設定する際には下記のように@を用いた省略記法も用意されています。慣れてくるとこちらの記法で記述すると楽ですね。
<button @click="toggle_switch()">Toggle Button</button>
 
  いかがでしょうか、jQueryなどでもよく使われていたトグル機能ですが、このようにVue.jsでも簡単に実装することができます。使いどころは多く、応用もたくさんあるのでぜひ覚えておきたいですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram