v-bind 動態屬性指令

:class 動態插入Class

通常可以這樣使用:

<div :class="{'className' : condition}"> </div>

如果有一個以上可以利用逗號放在一起

<div :class="{'className1' : condition1},{'className2' : condition2}"> </div>

直接傳入物件

但是如果有非常多個呢? 我們可以用傳入物件的方式來操作!
使用此方法比較不同的是，之前會在 : 後放上條件，而全部寫在一個陣列時會直接寫上 true / false，要切換時再加上

特別注意: 若className中間有 - ，應該要以[]包起來 classObject[class-Name1]
div: @click="classObject.className1 == !classObject.className1"
input: v-model="classObject.className2"

<div :class="classObject"> </div>
<script>
Vue.createApp({
    data(){
        return{
        //直接建立一個類別物件
            classObject: {
                'className1' : false
                'className2' : false
            },
        }
    }
})
</script>

直接傳入陣列

上面的方式是以true和false的條件插入。
而使用陣列是可以讓不是單純用true和false條件來插入的Class
input: v-model="classArray" value="className1"

<div :class="classArray"> </div>
<script>
Vue.createApp({
    data(){
        return{
        //直接建立一個類別物件
            classArray: [
                'className1',
                'className2',
            ],
        }
    }
})
</script>

:style 插入行內樣式

特別注意: 若Class間有 -，需要將第二個首字改大寫 backgroun-color > backgroundColor

1. 使用物件方式插入

   <div :style="{ backgroundColor : 'red' }"> </div>
   

2. 將物件存為變數使用(以物件傳入)

   <div :style="styleObject"> </div>
   <script>
   Vue.createApp({
    data(){
        return{
        //直接建立一個類別物件
            styleObject: {
                backgroundColor: 'red',
                borderWidth: '5px'
            },
        }
    }
   })
   </script>
   

3. 以陣列傳入
   陣列的傳入方式，是將所有物件起來

   <div :style="[{ backgroundColor : 'red' },{ borderWidth : '5px' }]"> </div>
   <div :style="[ styleObject1 , styleObject2 ]"> </div>
   

:disable

用在表單上

 <input type="text" :disabled="isdisabled" v-model="message" placeholder="輸入文字">

其他: :href / :src / :id