「Vue.js」v-bindでクラスのバインディングを実装する
環境
vue 2.6.14
構文
<p v-bind:class="{ クラス名: 変数名}">文字列</p>
変数名がtrueの場合、クラス名が有効になります。falseの場合無効になります。
使用例
<!DOCTYPE html> <html> <head> <title>Vueクラスのバインディングのサンプル</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <style> /*バインディングするCSSクラスの定義*/ .cft { font-size:24px; font-weight: bold; color: skyblue } </style> <body> <div id="app" > <button class="button" v-on:click="disp=!disp">検証</button> <p v-bind:class="{ cft: disp }">v-bindでクラスのバインディング</p> </div> <script> var app = new Vue({ el: '#app', data: { disp: false } }) </script> </body> </html>
結果
「検証」ボタンを押すと、段落の文字「v-bindのサンプル」が「.cft」のCSSが適用されます。