小程式與Vue對比·class與style繫結

小程式

最近在做些小程式轉Vue相關的工作，裡面有不少涉及到style和class繫結的，為了不至於用亂，我把小程式和Vue繫結方式都羅列了一下。
小程式裡面的class與style繫結，遵循HTML特性繫結，有關於HTML繫結，我在上一篇文章中有總結過，可點選檢視。在進行class與style繫結時，可以直接繫結，也可以帶上邏輯與，或者三元運算進行條件控制

JS
data: {
    dClass: 'my-class',
    dClass1: 'my-class1',
    dClass2: 'my-class2',
    dClass3: 'my-class3',
    dStyle: 'color:red;'
}

WXML
<view class="{{dClass}}"></view>
<view class="{{truthy ? dClass1 : dClass2}}"></view>
<view class="{{truthy && dClass3}}"></view>
<view style="{{dStyle}}"></view>
複製程式碼

Vue

在Vue裡面，class與style繫結同樣遵循著HTML繫結，我們只需要通過表示式計算出字串即可,表示式結果的型別除了字串之外，還可以是物件和陣列。

繫結class

字串型別

JS
data() {
    return {
        dClass: 'my-class'
    }
}

HTML
<div :class="dClass"></div>
複製程式碼

物件語法

JS
data() {
    return {
        showC1: true,
        showC2: true,
        showC3: true
    }
}

HTML
<div :class="{class1: showC1}"></div>
<div :class="{'class-2': showC2, 'class-3': showC3}"></div>
複製程式碼

:class指令可以與普通的class屬性共存，如果你打算無論如何都要新增一個class，放置到普通的class屬性中即可，比如：

JS
data() {
    return {
        showC1: true
    }
}

HTML
<div class="static" :class="{class1: showC1}"></div>
複製程式碼

繫結的資料可以直接定義在data裡面，比如：

JS
data() {
    return {
        classObj: {
            'class-1': true,
            'class-2': false,
            'class-3': true
        }
    }
}

HTML
<div :class="classObj"></div>
複製程式碼

繫結一個返回物件的計算屬性，比如：

JS
data() {
    return {
        classObj: {
            'class-1': true,
            'class-2': false
        }
    }
}

HTML
<div :class="classObj"></div>
複製程式碼

陣列語法

JS
data() {
    return {
        activeClass: 'active',
        errorClass: 'error'
    }
}

HTML
<div :class="[activeClass, errorClass]"></div>
複製程式碼

使用三元表示式切換列表中的class，比如：

JS
data() {
    return {
        showC1: true
    }
}

HTML
<div :class="[showC1 ? 'class-1' : '']"></div>
複製程式碼

總是新增一個class：

JS
data() {
    return {
        showC1: true
    }
}

HTML
<div :class="[showC1 ? 'class-1' : '', 'class-2']"></div>
複製程式碼

在陣列中使用物件語法：

JS
data() {
    return {
        showC1: true
    }
}

HTML
<div :class="[{'class-1': showC1}, 'class-2']"></div>
複製程式碼

繫結內聯樣式，即style

物件語法：

JS
data() {
    return {
        activeColor: 'red',
        fontSize: 30
    }
}

HTML
<div :style="{color: activeColor, fontSize: fontSize + 'px'}"></div>
複製程式碼

直接繫結一個樣式物件，CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：

JS
data() {
    return {
        styleObj: {
            'background-color': 'red',
            fontSize: '30px'
        }
    }
}

HTML
<div :style="styleObj"></div>
複製程式碼

使用陣列語法繫結多個樣式物件：

JS
data() {
    return {
        selfObj: {
            width: '100px',
            height: '50px'
        },
        childObj: {
            backgroundColor: 'red',
            'font-size': '30px'
        }
    }
}

HTML
<div :style="[selfObj, childObj]"></div>
複製程式碼