vue- HTML标签动态绑定class

使用v-bind:class可以为元素动态切换class。

对象形式绑定

<div v-bind:class="{ active: isActive }"></div>
data(){
    return{
    isActive:true
    }
}

active为绑定的类名，该类是否能作用于元素取决于isActive的值，当isActive的值为true时，为div绑定active类，当isActive的值为false时，则不绑定该类。

v-bind:class可以简写为 :class。

动态class对象中可以放置多个类名，动态class也可以和普通的class共存，不会覆盖之前的class类。

<div
  class="static"
  v-bind:class="{ active: isActive, text-danger : hasError }"
></div>
data(){
    return{
  isActive: true,
  hasError: false
    }
}

结果渲染为：

<div class="static active"></div>

绑定的class也可以不写在元素标签中，可以以对象的形式写在data中，通过改变class类名对应的值，切换class。

<div :class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

以数组形式绑定

静态绑定

<div v-bind:class="[ 'active', 'error']"></div>

<style>
.active{
}
.error{
}
</style>

三元运算符方式动态绑定（可以条件切换class）

<div v-bind:class="[ isActive?'active':'', errorClass]"></div>
// 元素始终有error类，active可以通过isActive值切换是否渲染该类
data(){
 return{
  isActive:true,
  errorClass: 'error'
 }
}
<style>
    .active{
    }
    .error{
    }
</style>

在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

固定显示class类

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'error'
}
<style>
    .active{
    }
    .error{
    }
</style>

渲染为：

<div class="active text-danger"></div>

项目中的使用 首都机场