vue.js 动态绑定class的几种方式

Vue.js 的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变得非常简单。

方式一.对象的形式 （第一个参数 类名， 第二个参数：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都符合双向绑定的规则！