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>