绑定class——对象语法和数组语法
对象语法: v-bind:class 可以与 class attribute 共存
class="red"
v-bind:class={active: isActive,'class-name':isShow}
绑定的数据可以存放在data 中,也可以放在计算属性中
数组语法: 数组语法中也可以使用对象语法
v-bind:class="[className1,className2, className3 ? className3 : '']"
v-bind:class="[className1,{active: isActive}]"
class属性也可以添加到组件上,等于追加
绑定内联样式
对象语法
:style="{background:color,top:number+'px'}"
直接绑定到一个对象上更好,让模板更清晰,也可以绑定在计算属性中
:style="styleObject"
data() {
return {
styleObject:{
color: 'red',
fontSize: '12px'
}
}
}
数组语法--可以将多个样式对象应用到统一元素
:style="[styleObject1,styleObject2]"