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
14397
Vue.js

Vue.jsですべてのページ要素が読み込み完了した後に任意のイベントを実行する方法

2022.09.15
8329
Vue.js

【簡単】Vue.jsとCSSを使ってハンバーガーメニューを実装する方法

2022.09.16
2977
Vue.js

Vue.jsでHTML要素をコンポーネント化(パーツ化)する方法

2022.09.01
2343