DOM元素經常動態地綁定一些class或style（比如輪播時的active）

Vue.js使用v-bind指令進行對class和style多種方法的綁定：通過表達式計算出字符串結果

如筆記二的指令中，有一個初步的了解，回顧當時的代碼如下：

<div id="app">
    <a v-bind：href="url">鏈接</a>
    <img v-bind: src="imgUrl">
</div>

<script>
    var app = new Vue({
        el: ‘#app
 
‘,
        data: {
            url: "http:  "
            imgUrl: "http: "
        }
    })
</script>

使用v-bind對class綁定的三種方式：對象語法 數組語法 組件使用

對象語法：

給:class設置一個對象，動態切換class

<div id="app">
    <!--語法糖v-bind :-->
    <div :class="{‘active‘ : isActive}"></div>
 

    <!--:class與普通class可以共存，對象可傳入多個屬性-->
    <div class="static" :class="{‘active‘: isActive,‘error‘: isError}"></div>
</div>

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            isActive: true
            isError: false
        }
    })
 
</script>

當表達式過於復雜時，同樣可以綁定一個計算屬性（筆記三），當條件兩個以上，均可使用data或computed

<div id="app">
    <div :class="classes"></div>
</div>

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            isActive: true
            error: false
        }
        computed: {
　　　　　　　//計算函數為函數形式
            classes：function () {
                return {
                    active: this.isActive && !this.error,
                    ‘text-fail‘: this.error && this.error.type === ‘fail‘
                }
            }
        }
    })
</script>

數組語法

當應用多個class時，可以使用數組語法，為:class綁定一個數組或使用三元表示法，應用一個class列表，或直接在對象語法中使用數組語法

<div id="app">
    <!--綁定一個數組-->
    <div v-bind:class="[activeClass, errorClass]"></div>
    <!--使用三元表達式-->
    <div v-bind:class="[isActive ? activeClass : ‘‘, errorClass]"></div>
    <!--使用對象語法-->
    <div v-bind:class="[{ active: isActive }, errorClass]"></div>
</div>

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            isActive: true,
            activeClass: ‘active‘,
            errorClass: ‘error‘
        }
    })
</script>

組件：因對組件不了解，暫時未熟悉，待組件學習後復習此處

綁定內聯樣式

其實在實際項目中，:style並不常見，往往會寫在計算屬性中

使用:style時，Vue.js會自動為特殊CSS添加前綴，如transform

v-bind:style（直接在元素上寫CSS），一般情況下，直接寫入長樣式不利於維護，故會寫在data或computed中，如下：

<div id="app">
    <div v-bind:style="styles"></div>
</div>

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            styles: {
                color: ‘red‘,
                fontSize: ‘13px‘
            }
        }
    })
</script>

Vue.js實戰 學習筆記 四（v-bind及class與style綁定）