微信小程序
小程序里面的 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>
来源: http://www.bubuko.com/infodetail-3279643.html