操作元素的class列表和样式可以用v-bind处理，只需要通过表达式计算出字符串，这样的方式较容易出错，vue.js专门做了增强

绑定html Class

对象语法

可以传给 v-bind:class 一个对象，动态切换class

<div v-bind:class="{ active: isActive }"></div>

表示class存在与否取决于数据属性isActive值的真假(trye/false)

可以在对象中传入多个属性来动态切换多个class，也可以和原本的class共存，

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

如下data:

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

当isActive或hasError值发生变化，对应class列表也会发生变化，如将hasError值改为true，class列表将变成"static active text-danger"

绑定的数据对象也不一定内联定义在模板里

<div v-bind:class="classObject"></div>

data:{
    classObject:{
        active:true,
        text-danger:false
    }
}

我们也可以在这里绑定一个返回对象的计算属性(对象的具体值通过计算取的)

数组语法

我们可以把一个数组传给v-bind:class

<div v-bind:class="[activeClass,errorClass]"></div>

data:{
    activeClass:"active",
    errorClass:"error"
}

渲染后：

<div class="active error"></div>

若需要根据条件切换列表中class也可以用三元表达式

<div v-bind:class="[isActive?activeClass:'',error]"></div>

当isActive值为true时才添加activeClass，这样的写法比较繁琐，在这里也可以使用对象语法

<div v-bind:class="[{active:isActive},error]"></div>

用在组件上

在一个自定义组件上使用class属性时，这些类会被添加到该组件的根目录，已存在的类不会被覆盖

例如声明以下组件:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

在使用时添加一些class

<my-component class="baz boo"></my-component>

渲染结果：

<p class="foo bar baz boo">Hi</p>

对于带数据绑定的参数也适用

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观，看着和css非常像，但其实是javascript对象，css属性名可以采用驼峰命名，也可以使用短横线分割(需要引号)命名

<div v-binD:style="color:activeColor,fontSize:fontSize+'px'">..</div>

data:{
    activeColor:"red",
    fontSize:12
}

也可以直接绑定到一个对象上

<div v-bind:style="styleObject"></div>

data:{
    styleObject:{
        color:"red",
        fontSize:"18px"
    }
}

数组语法

可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseSrtle,activeStyle]"></div>

自动加前缀

当v-bind:style使用需要添加浏览器引擎前缀的css属性时，Vue会自动侦测并添加相应前缀

多重值

从2.3.0后的版本可以为style绑定的属性提供一个包含多个属性值的数组，常用于多个带前缀的值

例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

只会渲染出最后一个被浏览器支持的值，本例中如果浏览器不支持不带前缀的flexbox，那么只会渲染display:flex