Written by Kasumi

Vue.jsでクリックしたら表示・非表示するイベントを実装する方法

Vue.jsで、クリックしたら表示・非表示するイベントを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

Vue.jsの導入方法はこちら
https://kasumiblog.org/vue-js-cdn/

HTMLを準備

<div id="app">
	<button @click="toggle">クリック</button>
	<div v-show="show">コンテンツ</div>
</div>

まずはHTMLを準備します。

クリックするhtml要素に@click属性を付与。

値に任意のクリックイベント名を指定します。

クリックしたら表示したいhtml要素にv-show属性を付与。

同じくイベント名を指定します。

Vue.jsでクリックイベントを実行

const app = Vue.createApp({
	data() {
		return {
			// デフォルトはfalseにして非表示
			show: false
		}
	},
	methods: {
		//クリックしたら表示/非表示する
		toggle: function () {
			this.show = !this.show;
		},
	}
});
app.mount("#app");

Vue.jsでクリックしたら表示するコード例です。

dataメソッドにv-show属性で指定した値を記述。falseにして、デフォルトは非表示にします。

methodsオプション内で@click属性で指定した値をクリックしたらという関数を定義。

関数内で以下を指定します。

this.v-show属性のイベント名 = !this.v-show属性のイベント名;

ブラウザで確認し、クリックしてコンテンツが表示された成功です。

まとめ

Vue.jsでクリックしたら表示・非表示するイベントを実装する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Vue.js

【Vue.js】v-modelを使いselectの値を取得。初期値を設定する方法

2022.09.25
3128
Vue.js

vue-scrolltoのスムーススクロールで固定ヘッダーの高さ分アンカー位置がズレる(隠れる)【解決方法】

2022.09.05
537
Vue.js

Vue.jsでフォームの入力値をチェックし、リアルタイムで取得する方法

2022.09.11
1526
Vue.js

Vue.jsで配列要素を動的に追加する方法

2022.09.14
2525