JavaScript コーディング

【Vue.js】classを追加する

v-bindを使って2つのclass「style01」「style02」を追加

「style01」クラスは普通に追加し、「style02」はボタンのクリックで追加・削除を切り替えられるようにします。


■HTML
v-bind:classにはオブジェクトを設定しています。「style02」の値はenhanceとなっていますが、この変数の中身は真偽値のfalseが入っています。

■CSS

■JS
HTML側でボタンに @click=”enhance=!enhance” を設定しているため、ボタンをクリックするたび enhance の値は trueとfalseが入れ替わります。

よく使うので覚えておくと便利ですね (^^)

スポンサーリンク

-JavaScript, コーディング
-

© 2020 まめしばweb Powered by AFFINGER5