打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
uni-app动态绑定class和style
userphoto

2022.07.22 浙江

关注

动态绑定calss

  1. class="[{'类名’:条件},{'类名’:条件},{'类名’:条件}]"
    为不同条件的image绑定不同的样式

<image 
     class="img1" 
     :class="[{'img1':index == 0},{'img2':index == 1},{'img3':index == 2}]"
     :src="avtUrl" 
    >
</image>

2、数组的方式,直接绑定多个 class 属性

   // 数组的方式,直接绑定多个 class 属性
    <view :class="['green', 'font-big','font-bold' ]" ></view>

动态绑定style
1、

   // 绑定单个内联样式
    <view :style="{'display':config.isHaveSearch ? 'block':'none'}" ></view>
    <view :style="{color:item.age<18?'#ccc':''}"></view>
    
    <view :style="{ color: activeColor, fontSize: fontSize + 'px' }"></view>
    <view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]"></view>

2、

// 复杂情况
:style="[{'width':size + 'px'},{'height':size + 'px'}]"
<text 
class="title" 
:style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" 
style="color:red;"
>
{{title}}
</text>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
光盘刻录技巧
js实现点击div隐藏相应部分,再次点击显示
春天没来:多张图片的鼠标跟随效果(代码)
一篇文章带你了解HTML的网页布局结构
数据库备份与pymysql
简单了解css3样式表写法和优先级
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服