vue中的綁定class和微信小程序中的綁定class的區別

微信小程序

小程序里面的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綁定class

在Vue里面，class與style綁定同樣遵循着HTML綁定，我們只需要通過表達式計算出字符串即可,表達式結果的類型除了字符串之外，還可以是對象和數組。

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>