uniapp动态设置style和class样式

注意：以下两种样式设置，涉及到单位的只能用px，而不能使用rpx

style样式设置

样式名称统一使用驼峰命名方式：例如：fontSize

对象方式

: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]"