uniapp样式绑定方式

• 2019 年 11 月 6 日
• 筆記

uni-app的Class与样式的绑定

可用的几种class绑定方式:

html  <!-- 常规形式 -->  <view class="green">绿色的字体</view>  <view style="color: #00FF00;"> 我是一个绿色的内联样式字体</view>    <!--style 内联样式 绑定的形式 其中fontSize是一个变量，改变这个变量，字体也会随之改变-->  <view :style="{fontSize:fontSize + 'px'}"> 我是一个动态的内联样式字体</view>    <!-- 绑定的形式导入，接收的是一个数组，元素之间用逗号分割 -->  <view :class="['green', 'font-big','font-bold' ]" >大绿色粗体</view>  <!-- 动态绑定 -->  //class 支持的语法  <view :class="{ active: isActive }">111</view>  <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>  <view class="static" :class="[activeClass, errorClass]">333</view>  <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>  <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>  //style 支持的语法  <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>  <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>