一、前言

我们知道，html标签的样式一般通过class和style来声明。由于class和style都是标签的属性，所以可以使用v-bind( : )来绑定class和style的值。样式的声明支持字符串、对象和数组。

二、class的绑定

• 使用字符串

<div id="app">
    <a v-bind:class="status + ' btn'">123</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            status: 'active'
        }
    });
</script>

生成的dom是：

<a class="active btn">123</a>

• 使用对象
  对象主要用于类的切换，如果值为truthness，那么键名就会被编译成类名

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

生成的dom是：

<a class="active">123</a>

注意：这时不能使用{active: isActive} + btn来给class绑定可切换的active和btn两个类，因为vue会把它解释为[object Object] undefined

提示：也可以将对象放到data的一个属性中，class只要绑定这个属性即可

• 使用数组
  数组用于绑定多个class

<div id="app">
    <a v-bind:class="[active, 'btn']">123</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
           active: 'active'
        }
    });
</script>

生成的dom是：

<a class="active btn">123</a>

提示：绑定class的表达式中可以出现简单的js逻辑，比如三元运算符，字符串表示等。这与之前说的vue的html模板有简单的js解释器有关。

• 嵌套
  数组语法可以嵌套对象语法
  应用场景一般是标签有多个类需要绑定，而其中有些类需要切换

<div id="app">
    <a v-bind:class="[{active: isActive}, 'btn', btnType]">123</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            btnType: 'btn-success'
        }
    });
</script>

生成的dom是：

<a class="active btn btn-success">123</a>

三、style的绑定

因为style的每条样式属性都由键值对组成，所以style不能直接使用字符串。值得注意的是：vue会自动给绑定的个别css属性添加浏览器兼容性前缀

• 使用对象

<div id="app">
    <a v-bind:style="{color: color, background: 'yellow'}">123</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            color: 'red'
        }
    });
</script>

生成的dom是：

<a style="color: red; background: yellow;">123</a>

提示：同理，也可以把对象保存为data的一个属性来使用

• 使用数组
  使用数组可以使用多个对象定义的样式

<div id="app">
    <a v-bind:style="[bgObj, fontObj]">123</a>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            bgObj: {
                backgroundColor: 'yellow'
            },
            fontObj: {
                fontSize: '20px',
                color: 'red'
            }
        }
    });
</script>

生成的dom是：

<a style="background-color: yellow; font-size: 20px; color: red;">123</a>

• 嵌套
  对象语法可以嵌套数组语法
  主要应用场景是在使用需要添加前缀的css属性时，筛选出能被浏览器识别的值

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

在chrome中，生成的dom是

<div style="display: flex;"></div>