1. 动态绑定style与class
(1)vue:
动态class
对象语法:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
数组语法:
①<div v-bind:class="[activeClass, errorClass]"></div>
data: { activeClass: 'active', errorClass: 'text-danger' }
②<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
③<div v-bind:class="[{ active: isActive }, errorClass]"></div>
动态style
对象语法:
①<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' , backgroundColor: 'yellow' }"></div>
data: { activeColor: 'red', fontSize: 30 }
②<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }
数组语法:
v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
(2)小程序
动态class
<view class="choose {{num==1?'active':''}}" data-num="1" bindtap="itemClick"></view>
动态style
<view style="width: 100rpx; color:{{color}};backgroundColor:{{itemName.remark ? '#666666' : '#999999'}}" />