操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!--绑定 HTML Class 说明：绑定class用单大括号-->
        <div id="app1" class="static" v-bind:class="{active: isActive , 'textDanger': hasError}"></div>
        
        <!--绑定的数据对象不必内联定义在模板里：-->
        <div id="app2" class="static" v-bind:class="classObject"></div>
        
        <!--绑定一个返回对象的计算属性。这是一个常用且强大的模式：-->
        <div id="app3" class="static" v-bind:class="classObject"></div>
        
        <!--数组语法-->
        <div id="app4" v-bind:class="[activeClass, errorClass]"></div>
        
        <div id="app5" v-bind:class="[isActive ? activeClass: '', errorClass]"></div>
        
        <!--绑定内联样式-->
        <div id="app6" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'}">123</div>
        
        <!--直接绑定到一个样式对象通常更好，这会让模板更清晰：-->
        <div id="app7" v-bind:style="styleObject">123</div>

//前三个渲染结果：<div id="app1" class="static active"></div>
        var app1 = new Vue({
            el: '#app1',
            data: {
                isActive: true,
                hasError: false
            }
        });
        
        var app2 = new Vue({
            el: '#app2',
            data: {
                classObject: {
                    active: true,
                    textDanger: false
                }
            }
        });
        
        var app3 = new Vue({
            el: '#app3',
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classObject: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            }
        });
        
        //渲染结果：<div class="active text-danger"></div>
        var app4 = new Vue({
            el: '#app4',
            data: {
                activeClass: 'active',
                errorClass: 'textDanger'
            }
        });
        
        //渲染结果：<div class="active text-danger"></div>
        var app5 = new Vue({
            el: '#app5',
            data: {
                isActive: true,
                activeClass: 'active',
                errorClass: 'textDanger'
            }
        });
        
        var app6 = new Vue({
            el: '#app6',
            data: {
                activeColor: 'red',
                fontSize: 30
            }
        });
        
        var app7 = new Vue({
            el: '#app7',
            data: {
                styleObject: {
                    color: 'red',
                    fontSize: '30px'
                }
            }
        })

image.png