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でフォームの入力値をチェックし、リアルタイムで取得する方法

2022.09.11
131
Vue.js

Vue.jsでモーダルウィンドウを実装する方法【簡単】

2022.09.09
98
Vue.js

【Vue.js】デバイス幅によってクラスを切り替える方法

2022.09.06
95
Vue.js

Vue.jsでinputタグに入力された文字数をカウントし、制限をかける方法

2022.09.12
110