uniapp样式绑定方式

2019-09-22 12:42:26

uni-app的Class与样式的绑定

可用的几种class绑定方式:


<!-- 常规形式 -->
<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>
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
加入两百人技术交流群
探讨前端、小程序开发及逆向、微信开发...
一起学习,共同成长
添加博主微信回复"加群"
微信情报 更多 >
    每天进步一点点~