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