Class和Style绑定（Vue笔记）绑定HTML Class 对象语法 v-bind:class 1.绑定的数据对象

绑定HTML Class

v-bind:class

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

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的真实性

1.可以在对象中传入更多字段来动态切换多个class
2.v-bind：class 指令也可以与普通的class attribute共存

1.绑定的数据对象内联定义在模板里：

模板：

<div  
class="static"  
v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>

data:

data: {  
isActive: true,  
hasError: false  
}

结果渲染：

<div class="static active"></div>

2.绑定的数据对象不必内联定义在模板里：

渲染结果和第一个相同

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

data: {  
classObj: {  
active: true,  
'text-danger': false  
}  
}

可以把一个数组传给v-bind:class,来应用一个class列表：

模板：

<div v-bind:class="[activeClass, errorClass]"></div>

data:

data: {  
activeClass: 'active',  
errorClass: 'text-danger'  
}

结果渲染：

<div class="active text-danger"></div>

1.三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

2.在数组语法中使用对象语法：

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

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

声明组件:

Vue.component('my-component', {  
template: '<p class="main">Hello</p>'  
})

使用时添加class:

<my-component class="other"></my-component>

//带数据绑定class也同样适用：
<my-component v-bind:class="{ active: isActive }"></my-component>

渲染结果：

<p class="main other">Hello</p>

1.引入多个样式

//html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'}"></div>

//js
data: {  
activeColor: 'red' 
}

2.直接绑定到一个样式对象

//html
<div v-bind:style="styleObject"></div>

//js
data: {  
styleObject: {  
color: 'red',  
fontSize: '13px'  
}  
}

数组语法可以将多个样式对象应用到同一个元素

//html
<div v-bind:style="[style1, style2]"></div>

从2.3.0起可以为style绑定中的property提供一个包含多个值的数组

//html
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样只会渲染数组中最后一个被浏览器支持的值