• Vue.js

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でクリックしたら表示・非表示するイベントを実装する方法について紹介しました。

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