动态绑定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>