前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp样式绑定方式

uniapp样式绑定方式

作者头像
薛定喵君
发布2019-11-05 23:59:58
4.2K0
发布2019-11-05 23:59:58
举报
文章被收录于专栏:薛定喵君

uni-app的Class与样式的绑定

可用的几种class绑定方式:

代码语言:javascript
复制
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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/09/22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档