Vue中动态绑定class、style

Class

1、:class 指令可以与普通的 class 属性共存

<div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div>

data: { isActive: true, hasError: false }

显示：
<div class="static active"></div>

2、 把一个数组传给 :class，以应用一个 class 列表

<div :class="[activeClass, errorClass]"></div>

data: { activeClass: 'active', errorClass: 'text-danger' }

显示：
<div class="active text-danger"></div>

Style

1、:style 的对象语法与style属性共存

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: { activeColor: 'red', fontSize: 30 }

或者更好：
<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2、方法返回

<div :style="getStyle(section)"></div>

data() {
    return {
        myHeight:((window.innerWidth - 24) * 190 / 375) + "px"
    }
}

getStyle(item) {
    return "width:100%;height:" + this.myHeight + ";background-repeat:no-repeat;background-size:cover;background-image:url(" + item.picture + ");";
}

---

参考文档：

https://cn.vuejs.org/v2/guide/class-and-style.html