Vue.js 的核心是一個響應的資料繫結系統，它允許我們在普通 HTML 模板中使用特殊的語法將 DOM “繫結”到底層資料。被繫結的DOM 將與資料保持同步，每當資料有改動，相應的DOM檢視也會更新。基於這種特性，通過vue.js動態繫結class就變得非常簡單。

思路：以某一頁面樣式需要單獨適配iphonex為例

方式一.物件的形式 （第一個引數 類名， 第二個引數：boolean值）  :class="{'footer':isIphoneX}" 

//某一頁面適配iPhone X
<div class="bottom" :class="{'footer':isIphoneX}">
</div>

 data () {
    return {
      isIphoneX:false
    }
  },

 mounted () {
    if(window.screen.width==375&&window.screen.height==812){
      this.isIphoneX = true
    }
 

 渲染後的

渲染後的HTML:
<div class="bottom footer">
</div>

 如圖：

優點：以物件的形式可以寫多個，用逗號分開  <div :class="{'p1' : false, 'p': true}"></div>

方式二.三元表示式(放在陣列中，類名要用引號)  :class="[isIphoneX ? 'bottom' : 'footer']"

//某一頁面適配iPhone X
<div :class="[isIphoneX ? 'bottom' : 'footer']">
</div>
 

渲染後：

渲染後的HTML:
<div class="footer">
</div>

如圖：

方式三.動態數組裡的變數 :class="[isTrue, isFalse]"

//某一頁面適配iPhone X
<div :class="[{'footer':isIphoneX} , 'bottom']">
</div>

渲染後和方法一是一樣的。vue資料和class都符合雙向繫結的規則！

簡書地址：https://www.jianshu.com/u/995088b0c656