v-bindを使って２つのclass「style01」「style02」を追加
「style01」クラスは普通に追加し、「style02」はボタンのクリックで追加・削除を切り替えられるようにします。
■HTML
v-bind:classにはオブジェクトを設定しています。「style02」の値はenhanceとなっていますが、この変数の中身は真偽値のfalseが入っています。
1 2 3 4 | <div id="app"> <div @click="enhance=!enhance">ボタン</div> <div v-bind:class="{style01:true,style02:enhance}">テキスト</div> </div> |
■CSS
1 2 3 4 5 6 7 | .style01 { font-size: 40px; color: #bc8f8f; } .style02 { font-weight: bold; } |
■JS
HTML側でボタンに @click=”enhance=!enhance” を設定しているため、ボタンをクリックするたび enhance の値は trueとfalseが入れ替わります。
1 2 3 4 5 6 | var app = new Vue({ el: "#app", data: { enhance: false } }) |
よく使うので覚えておくと便利ですね (^^)