Vue 基礎勉強 v-bind (2)

(Vue.js 3.1.5を使用)

v-bind
属性のデータバインディング

前回は、以下のように書いたが、
(valueに値を表示させる。( v-bind:value="変数名" とする。))

javascript

const app = Vue.createApp({
    data: () => ({
        message: 'データバインディング'
    })
})
app.mount('#app')

html

    <div id="app">
        <p><input type="text" v-bind:value="message"></p>
    </div>

classの値について、v-bindを使用する場合は、以下のように書く。
( v-bind:class= とする。)

javascript

const app = Vue.createApp({
    data: () => ({
        isRed: false
    })
})
app.mount('#app')

css

#app span.red{
    color: red;
}

html

    <div id="app">
        <span v-bind:class="{red: isRed}">こんにちは！</span>        
    </div>

isRed: false のときは、文字列は、黒文字のまま。

isRed: true のときは、文字列は、赤文字になる。

参考：

v-bind:class にオブジェクトを渡すことでクラスを動的に切り替えることができます:

この形v-bind:class="{red: isRed}" でオブジェクトを渡すことになる。