vue 資料繫結-動態樣式

動態class名繫結的幾種方式
1. 物件方式

new Vue({
  el: '#root',
  template: `<div :class="{active: isActive"></div>`,
  data () {
    return {
      isActive: true
    }
  }
})

1. 陣列內物件

  template: ` <div :class="[{active: isActive}]"></div>`

1. 三目運算子

  template:
 
 `<div :class="isActive ? 'active' : '' "></div>`

1. 陣列中三目運算子

  template: `<div :class="[isActive ? 'active' : '']"></div>`

繫結多個樣式style

new Vue({
  el: '#root',
  template: `<div :style="[style1, style2]"></div>`,
  data () {
    return {
      style1: {
        color:
 
 'blue'
      },
      style2: {
        color: 'black'
      }
    }
  }
})