本文介紹了Vue的Class與Style綁定，分享給大家，具體如下：

綁定 HTML Class

對象語法

我們可以傳給 v-bind:class 一個對象，以動態地切換 class：

<style>  .exp{    border: 1px solid #ccc;  }  .forExp{    background: blue;  }</style><div class="exp" v-bind:class="{newExp:isNewExp}"></div><script>  var exp=new Vue({    el:".exp".    data:{      isForExp:false    }  })</script>

如上，我們先給 .exp 一個邊框，我們利用 v-bind 方法傳入一個新的 class 屬性 .newExp，設置一個藍色的背景顏色。當我們在控制臺修改 .newExp 的屬性為 true 時，會給 div 添加一個藍色的背景顏色。

我們也可以傳入更多的屬性來切換多個 class 。

<div class="exp" v-bind:class="{newExp:isExp,npc:isNpc}"></div><script>  data:{    isExp:false,    isNpc:true  }</script>

在模板里的渲染結果為：

<div class="exp isNpc"></div>

我們也可以使用對象的方法來切換屬性

<div class="exp" v-bind:class="obj"></div><script>  data:{    obj:{      newExp:false,      npc:true    }  }</script>

渲染結果和上面的一樣

數組語法

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

<div class="exp" v-bind:class="[newExp,oldExp]"></div><script>  data:{    newExp:"new",    oldExp:"old"  }</script>

渲染為：

<div class="exp new old"></div>

要切換class，使用三元運算符：

<div class="exp" v-bind:class="[act? newExp:oldExp]"></div><script>  data{    newExp:"new",    oldExp:"old",    act:true  }<script>

act 為 true 時，添加 new ，為 false 時添加 old。

用在組件上

聲明一個組件：

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

然后在使用它的時候添加一些 class：

<my class="tip"></my>

最終渲染為

<p class="foo bar tip">Hi</p>

同樣的適用于綁定 HTML class:

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

當active為true時，HTML 將被渲染成為：

<p class="foo bar active">Hi</p>

綁定內聯樣式

對象語法

v-bind:style 的對象語法十分直觀——看著非常像 CSS，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式 (camelCase) 或 (配合引號的) 短橫分隔命名 (kebab-case)：