Vue。js 的核心是一個響應的資料繫結系統，它允許我們在普通 HTML 模板中使用特殊的語法將 DOM “繫結”到底層資料。被繫結的DOM 將與資料保持同步，每當資料有改動，相應的DOM檢視也會更新。基於這種特性，透過vue。js動態繫結class就變得非常簡單。
思路：以某一頁面樣式需要單獨適配iphonex為例
方式一.物件的形式
（第一個引數 類名， 第二個引數：boolean值） ：class=“{‘footer’：isIphoneX}”
//某一頁面適配iPhone X
data （） { return { isIphoneX：false } }， mounted （） { if（window。screen。width==375&&window。screen。height==812）{ this。isIphoneX = true }渲染後的
渲染後的HTML：
如圖：
image
優點：以物件的形式可以寫多個，用逗號分開
方式二.三元表示式(
放在陣列中，類名要用引號
)
：class=“［isIphoneX ？ ‘bottom’ ： ‘footer’］”
//某一頁面適配iPhone X
渲染後：
渲染後的HTML：
image。gif
如圖：
image
**方式三。動態數組裡的變數 **：class=“［isTrue， isFalse］”
//某一頁面適配iPhone X
渲染後和方法一是一樣的。vue資料和class都符合雙向繫結的規則！
