Vue Class、Attribute and Style Bindings

Vue：2.5

Vue 提供了 v-bind 語法解決設定 DOM 的 Class、Attribute、Style 的問題。

基本使用

v-bind 用法是 v-bind:attribute，也可以省略成 :attribute。

範例

<div id="app">
    <span v-bind:title="titleValue" :data-name="nameValue">
        TEST
    </span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        nameValue: 'Johnson Lu',
        titleValue: 'This is title'
    }
});

生成出來的結果會變成：

<span title="This is title" data-name="Johnson Lu"></span>

Binding HTML Classes

HTML 的 class 通常會與 UI 操作有直接關係，所以會顯得複雜一些，但是一樣可以用 v-bind 解決。

想要根據資料來判斷是否顯示提示視窗就是個常見的案例。

Object Syntax

範例

<!-- attribute:boolean -->
<!-- 根據值的結果決定要不要加上特定的 class -->
<div id="app">
    <span class="column" :class="{active: isActive, 'text-danger': hasError}">
        TEST
    </span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        isActive: false,
        hasError: true
    }
});

生成出來的結果會變成：

<span class="column text-danger">

除了指定之外，也可以直接使用物件的方式操作。

<div id="app">
    <span class="column" :class="classObj">
        TEST
    </span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        classObj: {
            active: false,
            'text-danger': true
        }
    }
});

Array Syntax

範例

<div id="app">
    <span class="column" :class="[active, 'text-danger']">
        TEST
    </span>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        active: false,
        'text-danger': true
    }
});

也可以透過 v-bind 做一些簡易判斷。

<div id="app">
    <span class="column" :class="[active ? 'active' : 'disable', 'text-danger']">
        TEST
    </span>
</div>