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