uni-app动态绑定class和style
动态绑定calss
- 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>
作者：梧桐花落了
链接：http://events.jianshu.io/p/e717fe177d31
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
阅读剩余
版权声明：
作者：admin
链接：http://blog.mryxh.cn/2334.html
文章版权归作者所有，未经允许请勿转载。
THE END