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

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>

如图：image

优点：以对象的形式可以写多个，用逗号分开 <div :class=”{‘p1’ : false, ‘p’: true}”></div>

方式二.三元表达式(放在数组中，类名要用引号) :class=”[isIphoneX ? ‘bottom’ : ‘footer’]”

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

渲染后：

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

image.gif

如图：image

**方式三.动态数组里的变量 **:class=”[isTrue, isFalse]”

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

渲染后和方法一是一样的。vue数据和class都符合双向绑定的规则！