class和style绑定

1. 简单，单个class直接用三元表达式

 <i class="el-icon-top" @click="changeCondition(1, 2)" :class="queryForm.sortOrder == 1 && queryForm.sortType == 2? 'd-arrow-active': 'd-arrow'" /> 

3. 复杂，多个class用数组的形式

id="u-wave-btn" class="u-btn u-line-1 u-fix-ios-appearance" :class="[     'u-size-'   size,     plain ? 'u-btn--'   type   '--plain' : '',     loading ? 'u-loading' : '',     shape == 'circle' ? 'u-round-circle' : '',     hairLine ? showHairLineBorder : 'u-btn--bold-border',     'u-btn--'   type,     disabled ? `u-btn--${ 
          type}--disabled` : '', ]" 

height，width，background等值不是固定有限且较少的可选值style属性值为变量

<div                   :class="[                     `u-img j-order-${ 
          editData.params.type}`,                     editData.params.isFlex                       ? `j-w-48-p j-h-250 goods-img-w100 j-order-${ 
          editData.params.type}` : 'j-w-100-p j-h-200 goods-img-w70', isNull(editData.params.radius) && editData.params.radius != '0' ? `j-radius-def` : `j-radius-${ 
           editData.params.radius}`, ]" :style="{ backgroundImage: `url(${i.thumb ? i.thumb : thumb})`}" ></div>