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 会自动侦测并添加相应的前缀。