非常重要
:小程序端不支持 classObject 和 styleObject 语法。
文档:https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#class-与-style-绑定
目录
- 对象语法
- 数组语法
- 字符串语法
- computed
- 其他方案
对象语法
<!-- class -->
<view class="static" :class="{ active: isActive}">111</view><!-- style -->
<view :style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view>
数组语法
<!-- class -->
<view class="static" :class="['activeClass', 'errorClass']">111</view><!-- style -->
<view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
字符串语法
<!-- class -->
<view class="static" :class="computedClassStr">111</view><!-- style -->
<view :style="computedClassStr">444</view>
computed
<!-- 支持 -->
<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{active: isActive}"></view><!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>
其他方案
使用第三方库classnames
,来处理类名,可以将ClassObject转为ClassStr
具体用法可以参看:https://pengshiyu.blog.csdn.net/article/details/134287806