vue 动态绑定class,style

动态绑定class

// 单个class动态绑定
<div :class="{ active: isActive }"></div> 

// 动态绑定多个class
<div :class="{ 'active': isActive, 'sort': isSort }"></div> 

// 多个class动态绑定，这里one是固定的class, two和three是根据条件判断是否需要绑定
<div :class="[one, { two: isTwo, three: isThree }]"></div>

// 三元运算符
<div :class="{isActive==1? 'active' : ''}"></div>

// 把绑定的对象放在data里面
<div :class="classObj"></div>
data() {
  return {
    classObj: { active: true,  acticeIndex: true}
  }
}

动态绑定style

 <div id="limit" :style="{ width: productBJ.width + 'px', height: productBJ.height + 'px'}"></div>

// 动态绑定背景图
 <div class="backgroundImg" :style="{backgroundImage: 'url(' + imgUrl+ ')'}"></div>

// 动态绑定背景图加其他属性
<div class="backgroundImg" :style="{backgroundImage: 'url(' + imgUrl+ ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}"></div>