uni-app动态绑定class和style

513 阅读1分钟

uni-app动态绑定class和style

image.png

image.png

image.png

image.png

对象方式

:style="{backgroundImage:url(${itemB.images})}"
:style="{ paddingTop: paddingTopNum + 'px' }"

数组加三元运算方式

:class="[items.isShow?'':'noneActive',subIndex[index] == indexs?'value-item-active':'value-item']"

对象数组方式

:style="[{paddingTop: background},{color: getColor}]"
:style="[{ color: activeColor, fontSize: fontSize + 'px' }]"

对象方式

:style="{left:${iconDistance}rpx}"
:style="{backgroundImage:url(${topBgImg})}"

style方式calc

:style="{height:'calc(100vh - ' + pageTopHeight +'px - 140rpx)'}"

class样式设置

对象方式

:class="{ active: isActive, 'text-danger': hasError }"
:class="[activeClass, errorClass]"

三元运算方式

:class="[isActive ? activeClass : ' ', errorClass]"

数组加对象方式

:class="[{ active: isActive }, errorClass]"