Class 与 Style 绑定

一、绑定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'

　　　　　　}

　　　　}