Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する
今回はVue.jsのコンポーネント内でトグル機能を実装する方法をまとめていきたいと思います。一般的なウェブサイトやアプリケーションでもよく見かける機能で、jQueryを使う場合やDOMの操作でclassを切り替えるなどでも実装してきた例もあるかと思いますが、Vue.jsの場合にはこれまでと少し異なるので、ぜひ覚えておきましょう。では早速コードを見ていきます。
【Vue】
ちなみにですが、「v-on」ディレクティブでイベントを設定する際には下記のように@を用いた省略記法も用意されています。慣れてくるとこちらの記法で記述すると楽ですね。
いかがでしょうか、jQueryなどでもよく使われていたトグル機能ですが、このようにVue.jsでも簡単に実装することができます。使いどころは多く、応用もたくさんあるのでぜひ覚えておきたいですね。
<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オプションで設定した値が切り替わっているのがわかりますね。


<button @click="toggle_switch()">Toggle Button</button>
いかがでしょうか、jQueryなどでもよく使われていたトグル機能ですが、このようにVue.jsでも簡単に実装することができます。使いどころは多く、応用もたくさんあるのでぜひ覚えておきたいですね。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories