vue-綁定class樣式

1、數組語法

我們可以藉助於v-bind指令來實現：

HTML：

<div id="app">
    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
        }
    })
</script>

渲染後的效果：（具有active和hasError的樣式）

2、對象語法

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

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

上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 truthiness（所有的值都是真實的，除了false,0,“”,null,undefined和NaN）。

你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind: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>

active樣式和text-danger樣式的存在與否，取決於isActive和hasError的值。本例中isActive爲true，hasError爲false，所以active樣式存在，text-danger不存在。