目錄

• 動態綁定calss
• 動態綁定style

動態綁定calss

class="[{‘類名’:條件},{‘類名’:條件},{‘類名’:條件}]"
為不同條件的image綁定不同的樣式

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

數組的方式，直接綁定多個 class 屬性

// 數組的方式，直接綁定多個 class 屬性<view :class="['green', 'font-big','font-bold' ]" ></view>

動態綁定style

// 綁定單個內聯樣式<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>

// 復雜情況<text class="title" :style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" style="color:red;">{{title}}</text>

總結

以上是生活随笔為你收集整理的uni-app动态绑定class和style的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。