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