Vue入门 - Class 与 Style 绑定

1 绑定class

1.1 对象语法

<div class="static" :class="{ active: isActive }"></div>

可将对象绑定在class属性上，动态切换class

若isActive为true，则class插入active

若isActive为false，则class移除active

v-bind:class与普通class可共存。

可绑定data中的对象，或计算属性。

1.2 数组语法

<div class="[activeClass, errorClass]"></div>

//...
data(){
return{
activeClass:'active',
errorClass:'error'
}
}

在数组中嵌套表达式：

<div class="[activeClass?"active":"", errorClass]"></div>

在数组中嵌套对象：

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

1.3 用在组件上

//parent
<my-component class="boo baz"><my-component>

//children
<p class="foo bar">hi<p>

//渲染后结果
<p class="foo bar boo baz">hi<p>

给组件赋值的class会与组件内根节点的class合并。

2 绑定style

2.1 对象语法

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

data: {
activeColor: 'red',
fontSize: 30
}

与class一样，也是将对象通过v-bind绑定到元素的style属性上。

2.2 数组语法

<div v-bind:style="[baseStyles, overridingStyles]"

data{
baseStyles:{},
overridingStyles:{}
}

数组语法可将多个对象绑定到style属性。

3 自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。