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>

转载于:https://www.cnblogs.com/zjh-study/p/10654941.html