Vue(三) v-bind 及 class 与 style 绑定

DOM 元素经常会动态绑定一些 class 类名 或 style 样式，现在介绍使用 v-bind 指令来绑定 class 和 style 的多种方法。

了解 v-bind 指令

在之前已经介绍了指令 v-bind 的基本用法以及它的语法糖，它的主要用法是动态更新 HTML 元素上的属性，回顾之前的一个样例：

<div id="app">
    <a v-bind:href="url">百度一下</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>

在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定，它们也是 HTML 的属性，因此可以使用 v-bind 指令。

绑定 class 的几种方式

对象语法

给 v-bind:class 设置一个对象，可以动态地切换 class，例如：

<div id="app">
	<div> :class="{ 'active' : isActive }"</div>
</div>
<script>
	var app = new Vue({
        el: '#app',
        data: {
            isActive: true
        }
	})
</script>

上面示例中，类名 active 依赖数据 isActive。另外 :class 可以与普通 class共存，例如：

<div id="app">
    <div class="static" :class="{ 'active' : isActive, 'error': isError }"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            isError: false
        }
    })
</script>

:class 内的表达式每项如果为真，对应的类名就会加载，上面的渲染后的结果为：

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

当数据 isActive 或 isError 变化时，对应的 class 类名也会更新。比如当 isError 为 true 时，渲染后的结果为：

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

当 :class 的表达式过长或逻辑复杂时，可以使用 data 或者 computed，或者类似计算属性的 methods 这三种方法。

使用 data：

<div id="app">
    <div class="static" :class="classes"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            classes: {
                active: true,
                error: false
            }
        }
    })
</script>

使用 computed：

<div id="app">
    <div class="static" :class="getClasses"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        computed: {
            getClasses: function () {
                return {
                    active: true,
                    error: false
                }
            }
        }
    })
</script>

数组语法

当需要应用多个 class 时，可以使用数组语法，给 :class 绑定一个数组，应用一个 class 列表：

<div id="app">
    <div :class="[ activeCls, errorCls ]"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeCls: 'active',
            errorCls: 'error'
        }
    })
</script>

渲染后的结果为：

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

也可以使用三元表达式来根据条件切换 class，例如：

<div id="app">
    <div :class="[isActive ? activeCls : '', errorCls]"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            activeCls: 'active',
            errorCls: 'error'
        }
    })
</script>

样式 error 会始终应用，当数据 isActive 为真时，样式 active 才会被应用。class 有多个条件时，这样写较为繁琐，可以在数组语法中使用对象语法。

<div id="app">
    <div :class="[ {'active': isActive}, errorCls ]"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            errorCls: 'error'
        }
    })
</script>

当然，与对象语法一样，也可以使用data、computed 和 methods 三种方法，以计算属性为例：

<div id="app">
    <button :class="classes"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            size: 'large',
            disabled: true
        },
        computed: {
            classes: function () {
                return [
                    'btn',
                    {
                        ['btn-' + this.size]: this.size !== '',
                        ['btn-disabled']: this.disabled
                    }
                ]
            }
        }
    })
</script>

该示例最终渲染结果为：

<button class="btn btn-large btn-disabled"></button>

使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用属性。

绑定内联样式

使用 v-bind:style（即 :style ）可以给元素绑定内联样式，方法与 :class 类型，也有对象语法和数组语法，看起来很像直接在元素上写 CSS：

<div id="app">
    <div :style="{ 'color': color, 'fontSize': fontSize }">我是文本</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            color: 'red',
            fontSize: 20 + 'px'
        }
    })
</script>

CSS 属性名称使用驼峰命名（cameCase）或短分隔符命名（kebab-case），渲染后的结果为：

<div style="color: red, font-size: 20px">我是文本</div>

大多数情况下，直接写一长串的样式不易于阅读和维护，所有一般写在d ata 或 computed 里，以 data 为例：

<div id="app">
    <div :style="styles">我是文本</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            styles: {
                color: 'red',
                fontSize: 20 + 'px'
            }

        }
    })
</script>

应用多个样式对象时，可以使用数组语法：

<div :style="[styleA, styleB]"> 我是文本 </div>

在实际业务中，:style 的数组语法并不常用，因为往往可以写在一个对象里，而较为常见的应当是计算属性。

另外，使用 :style 时，Vue.js 会自动给特殊的 CSS 属性名称添加前缀，比如 transform。