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>

 

 

vue中的绑定class和微信小程序中的绑定class的区别

上一篇:小程序的基本概念-生命周期(组件 wxml)


下一篇:【bug解决】ios微信浏览器中背景音乐无法播放