Vue的一些樣式（class/style）綁定

樣式有兩種：class、style

class

　　1、對象語法

　　　　①傳給 :class 一個對象

　　　　比如：

<div :class="{ active : isActive}"></div>

　　　　在這里，isActive的真值決定active這個樣式是否顯示

 

　　　　②傳給 :class 一個對象變量

　　　　再比如，可以直接綁定一個對象

<div :class = "duixiang" ></div>

export default{
   data(){
     return{
 duixiang :{ active : true }
     }
   }  
}

　　　　③在②的基礎上，把這個對象變量放到computed計算屬性里

data: {
  isActive: true,
  error: null
},
computed: {
 classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } }
}

 

　　2、數組語法

　　　　傳給 :class 一個數組（數組里面是變量名，然后具體變量名所指的內容寫到data里）

<div :class = "[ n , i]"> </div>

export default{
  data(){
    return{
      n : ' active ',
      i : ' text-danger ',
    }
   }
}

　　　　　上面的代碼在最后會宣傳成為<div class = "active text-anger"></div>

 

style

　　1、對象語法

　　　　①傳給 :style一個對象（這個對象是個JavaScript對象）。記住！CSS屬性名可以用駝峰式命名

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

//然后在data里面寫明，冒號后邊的這個變量的實際內容，如果是單位，像px這種就直接用字符串引着就行了

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

　　
　　　　②傳給 :style一個對象變量。

 

<div v-bind:style="styleObject"></div>
//然后在data聲明這個對象變量是指代一個怎樣具體的對象
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
同樣的，對象語法常常結合返回對象的計算屬性使用。