vue -- class & style動態綁定

class動態綁定

1、對象語法

通過v-bind指令動態綁定屬性來動態的切換class

<div v-bind:class="{ active: isActive }">Hello World</div>

通過改變isActive的值，我們可以讓div動態的是否擁有active這個class
多個class也是一樣

<div v-bind:class="{ active: isActive, error: isError}">Hello World</div>

或者直接在data中以對象的形式展示：

<div v-bind:class="classObj">Hello World</div>

// classObj
data: {
    classObj: {
        active: true,
        error: false
    }
}

2、數組語法

<div v-bind:class="[active,error]">Hellow World</div>

如果想要動態綁定，也可以利用三元表達式實現

<div v-bind:class="[ isActive ? active : '',isError ? error : '' ]"></div>

數組條件判斷太繁瑣，所以可以結合對象

<div v-bind:class="[ {active: isActive}, {error: isError} ]"></div>

二、style動態綁定

1、對象語法

通過v-bind指令動態綁定屬性來動態的切換style屬性

<div v-bind:style="{color: colorRed,font-size: fSize}"></div>

data: {
    colorRed: 'red',
    fSize: '30px'
}

2、數組語法

<div v-bind:style="[rcolor, fsize]"></div>

data: {
    rcolor: 'red',
    fsize: '30px'
}

三、樣式兼容

// 樣式展示位flex
<div v-bind:style="{display: ['-webkit-box', '-ms-flexbox', 'flex'];}"></div>