vue与小程序易混淆知识点

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'}}" />