操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個常見需求山孔。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結果即可。不過展鸡，字符串拼接麻煩且易錯姨丈。因此畅卓，在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強蟋恬。表達式結果的類型除了字符串之外翁潘，還可以是對象或數(shù)組。

<!--綁定 HTML Class 說明：綁定class用單大括號-->
        <div id="app1" class="static" v-bind:class="{active: isActive , 'textDanger': hasError}"></div>
        
        <!--綁定的數(shù)據(jù)對象不必內(nèi)聯(lián)定義在模板里：-->
        <div id="app2" class="static" v-bind:class="classObject"></div>
        
        <!--綁定一個返回對象的計算屬性歼争。這是一個常用且強大的模式：-->
        <div id="app3" class="static" v-bind:class="classObject"></div>
        
        <!--數(shù)組語法-->
        <div id="app4" v-bind:class="[activeClass, errorClass]"></div>
        
        <div id="app5" v-bind:class="[isActive ? activeClass: '', errorClass]"></div>
        
        <!--綁定內(nèi)聯(lián)樣式-->
        <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