vue动态绑定class的三种方式

运用场景

在开发项目中很多时候需要根据后端接口返回的不同状态来动态的显示前端页面，此时我们就可以动态操作元素的class来达到我们的目的。

方法一：传给 v-bind:class 一个对象

<template>
  <div class="classTest">
    <h2 :class="{'mblue':flag1, 'mred': flag2}">我是测试文字</h2>
  </div>
</template>

<script>
export default {
  name: 'classTest',
  data () {
    return {
      flag1: false,
      flag2: false
    }
  },
  created () {
    setTimeout(() => {
      this.flag2 = true
    }, 3000)
  }
}
</script>

<style scoped lang="less">
  .classTest{
    color: #000;
      .mblue{
        color: blue;
      }
      .mred{
        color: red;
      }
  }

</style>

方法二：传给v-bind:class 一个返回对象的计算属性

<template>
  <div class="classTest">
    <h2 :class="classObject">我是测试文字</h2>
  </div>
</template>

<script>
export default {
  name: 'classTest',
  data () {
    return {
      flag1: false,
      flag2: false
    }
  },
  created () {
    setTimeout(() => {
      this.flag2 = true
    }, 3000)
  },
  computed: {
    classObject () {
      return {
        mblue: this.flag1,
        mred: this.flag2
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped lang="less">
  .classTest{
    color: #000;
      .mblue{
        color: blue;
      }
      .mred{
        color: red;
      }
  }

</style>

方法三：传给 v-bind:class一个数组

<template>
  <div class="classTest">
    <h2 :class="[ flag1 ? 'mblue' : '' , flag2 ? 'mred': '']">我是测试文字</h2>
  </div>
</template>

<script>
export default {
  name: 'classTest',
  data () {
    return {
      flag1: false,
      flag2: false
    }
  },
  created () {
    setTimeout(() => {
      this.flag2 = true
    }, 3000)
  }
}
</script>

<style scoped lang="less">
  .classTest{
    color: #000;
      .mblue{
        color: blue;
      }
      .mred{
        color: red;
      }
  }

</style>