為了節約性能,我們將Class與Style的表達式通過compiler硬編碼到uni-app中
支持語法和轉換效果如下:
Class支持語法:
1 <view :class="{ active: isActive }">111</view> 2 <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view 3 <view class="static" :class="[activeClass, errorClass]">333</view> 4 <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> 5 <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
Style支持語法:
1 <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> 2 <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
不支持Vue官方文檔: Class與Style綁定中的classObject和styleObject語法.
此外還可以用computed方法生成class或style字符串,插入到頁面中,
1 <template> 2 <!-- 支持 --> 3 <view class="container" :class="computedClassStr"></view> 4 <view class="container" :class="{active: isActive}"></view> 5 <!-- 不支持 --> 6 <view class="container" :class="computedClassObject"></view> 7 </template>