Uni-app中Class绑定与Style绑定

时间 2019-11-08

标签 uni app class 绑定 style 繁體版

原文原文链接

为了节约性能,咱们将Class与Style的表达式经过compiler硬编码到uni-app中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支持语法:spa

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语法.code

此外还能够用computed方法生成class或style字符串,插入到页面中,blog

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>