绑定HTML Class

1.对象语法

可以传给v-bind：class一个对象，以动态的切换class
代码示例如下：

<div id='example' class="static" 
v-bind:class="{'didi-orange': isRipe, 'didi-green':isNotRipe}">
</div>
var vm=new Vue({
  el: 'example' ,
  data: {
    isRipe: true,
    isNotRipe: false
    }
})

渲染为

<div id='example' class="static didi-orange">
</div>

当 isRipe 和 isNotRipe 变化时，class列表将相应地更新。

也可以直接绑定数据中的一个对象，代码示例如下：

<div id='example' v-bind:class="ddfe"></div>
var vm  = new Vue({
  el: 'example',
  data:{
  ddfe:{
    'didi-orange' : true,
    'didi-green': false
    }
    }
})

还可以在这里绑定一个返回对象的计算属性，代码示例如下：

<div id='example' v-bind:class-"ddfe"></div>
var vm= new Vue({
  el: 'example',
  data: {
  didiage: 4,
  didiMember : 6000
  }
  
computed:{
  ddfe: function() {
  return {
    'didi-orange': this.didiAge>3 ? true: false,
    'didi-large': this. didiMember>1000 ? true: false
    }
    }
    }
})

2.数组语法

可以把一个数组传给v-bind:class,以应用一个class列表。代码示例如下:

'<div id='example' v-bind:class="[didiHandsome,didiBeautiful]">
var vm=new Vue({
  el: 'example',
  data:{
    didiHandsome: 'didi-handsome',
    didiBeautiful: 'didi-beautiful'
  }
})

渲染为:

<div id='example' class="didi-handsome didi -beautiful"></div>

如果想根据条件切换列表中的class,则可以用三元表达式。代码示例如下:

<div id='example' v-bind:class=" [didiHandsome, isRipe ? didiOrange: '']">

来源：CSDN

作者：Memory0_

链接：https://blog.csdn.net/Memory0_/article/details/103574043