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

Vue.js 2019.05.06

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

Tags: ,,

今回は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でも簡単に実装することができます。使いどころは多く、応用もたくさんあるのでぜひ覚えておきたいですね。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?