一、绑定HTML与Class
数组语法:
html部分:
<p :class="[{acitve:isActive,blue:isBlue},errorClass]">{{message}}</p> 注:这是官方文档提出来的写法。
<p :class="[classObject,errorClass]">{{message}}</p> 注:这是官方文档没有直接提出的写法,实际上验证也是可以的,这主要来自于‘绑定内联样式’中数组语法的启示,具体如二(绑定内联样式)。也可能官方已经告诉大家了,只是博主大大人老了,眼神不太好使,没看到罢了。
js部分:
此处省略声明vue;
data:{
message:'Hello World!',
isActive:true,
isBlue:false,
classObject:{
active:true,
blue:false
}
}
二、绑定内联样式
数组语法:
html部分:
<p :style="[baseStyles,overridingStyles]">{{message}}</p>
js部分:
data:{
message:'Hello World!',
baseStyles:{
color:'red',
fontSize:'25px'
},
overridingStyles:{
color:'blue',
backgroundColor:'yellow'
}
}