v-bind 動態屬性指令


Posted by hoyi-23 on 2021-08-04

: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


#v-bind #:class #:style #:disable







Related Posts

使用 Gazebo 模擬器控制機器人建立 2D 地圖

使用 Gazebo 模擬器控制機器人建立 2D 地圖

關於 Slot 元件插槽

關於 Slot 元件插槽

[TensorFlow Certification Day9] Time Series 初見面 Week1 (4hrs)

[TensorFlow Certification Day9] Time Series 初見面 Week1 (4hrs)


Comments