微信小程序
小程序里面的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>