class和style都可以是模版的属性，它们都可以通过v-bind动态的绑定到模版中：

  1. <div :class="className">这是class</div>
  2. <div :style="styleObj">这是style</div>

Vue对v-bind的class和style进行了特殊的封装，形式比较多，主要是对象和数组的绑定方式。

class

1、class属性绑定为一个对象

  1. const app = {
  2.   template:`<div :class="{ active: isActive }"></div>`,
  3.   // 渲染为 <div class="active"></div>
  4.   data(){
  5.     return {
  6.       isActive: true
  7.     }
  8.   }
  9. }

active类名是否生效，取决于数据属性isActive 的真假值。

或者直接绑定为一个对象：

  1. const app = {
  2.   template:`<div :class="{ active: isActive, 'text-danger': true }"></div>`,
  3.   // 渲染为 <div class="active text-danger"></div>
  4.   data(){
  5.     return {
  6.       isActive: true
  7.     }
  8.   }
  9. }

2、class属性绑定为一个数组

  1. const app = {
  2.   template:`<div :class="[activeClass, errorClass]"></div>`,
  3.   // 渲染为 <div class="active error"></div>
  4.   data(){
  5.     return {
  6.       activeClass: 'active',
  7.       errorClass: 'error'
  8.     }
  9.   }
  10. }

或者在数组中使用三元运算符有条件的渲染某个值：

  1. const app = {
  2.   template:`<div :class="[isActive ? activeClass : '', errorClass]"></div>`,
  3.   // 渲染为 <div class="error"></div>
  4.   data(){
  5.     return {
  6.       isActive: false,
  7.       activeClass: 'active',
  8.       errorClass: 'error'
  9.     }
  10.   }
  11. }

3、class属性也可以直接给组件进行绑定

  1. const myComponent = {
  2.   template: `<p class="foo bar">Hi!</p>`
  3.   // 渲染为 <p class="baz boo foo bar">Hi!</p>
  4. }
  5. const app = {
  6.   template: `<myComponent class="baz boo" />`,
  7.   components:{
  8.     myComponent
  9.   }
  10. }

class属性同样可以进行绑定：

  1. const myComponent = {
  2.   template: `<p class="foo bar">Hi!</p>`
  3.   // 渲染为 <p class="active foo bar">Hi!</p>
  4. }
  5. const app = {
  6.   template: `<myComponent :class="{ active: isActive }" />`,
  7.   components:{
  8.     myComponent
  9.   },
  10.   data(){
  11.     return{
  12.       isActive: true
  13.     }
  14.   }
  15. }

如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个**class**。你可以通过组件的**$attrs**属性来实现指定：

  1. const myComponent = {
  2.   template: `
  3.     <p :class="$attrs.class">Hi!</p>
  4.         <span>This is a child component</span>
  5.   `
  6.   // 渲染为 
  7.   // <p class="baz">Hi!</p>
  8.   // <span>This is a child component</span>
  9. }
  10. const app = {
  11.   template: `<myComponent class="baz" />`,
  12.   components:{
  13.     myComponent
  14.   },
  15.   data(){
  16.     return{
  17.       isActive: true
  18.     }
  19.   }
  20. }

style

1、style属性支持绑定为一个对象

  1. const app = {
  2.   template: `<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>`,
  3.   // 渲染结果 <div style="color: red; font-size: 30px }"></div>
  4.   data(){
  5.     return{
  6.       color: 'red',
  7.       fontSize: 30
  8.     }
  9.   }
  10. }

style对象内的属性可以使用小驼峰的形式进行书写：

  1. const app = {
  2.   template: `<div :style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>`,
  3.   // 渲染结果 <div style="color: red; font-size: 30px }"></div>
  4.   data(){
  5.     return{
  6.       color: 'red',
  7.       fontSize: 30
  8.     }
  9.   }
  10. }

2、style属性绑定为一个数组

  1. const app = {
  2.   template: `<div :style="[baseStyles, overridingStyles]"></div>`,
  3.   // 渲染结果 <div style="color: red; font-size: 30px }"></div>
  4.   data(){
  5.     return{
  6.       baseStyles: {
  7.         color: 'red'
  8.       },
  9.       overridingStyles: {
  10.          fontSize: 30
  11.       }
  12.     }
  13.   }
  14. }

3、style属性可以指定浏览器前缀

  1. const app = {
  2.   template: `<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>`
  3. }

数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。