本篇文章主要讲述HTML+CSS入门之一步浏览vue动态绑定class的最常用几种方式，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

第一种：（最简单的绑定）

1.绑定单个class

 html部分：

 <div :class="{'active':isActive}"></div>

 js部分：判断是否绑定一个active

data() {

    return {

      isActive: true

    };

  }

结果渲染为：

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

2.若要绑定多个class，需要逗号隔开就行（这里的activeTwo加不加引号都可以，也一样都能渲染，如下）

 <div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

js部分：判断是否绑定对应class

  data() {

    return {

      isActive: true,

      hasError: true

    };

  }

结果渲染为：

<div class="activeOne activeTwo activeThree"></div>

第二种：（绑定的数据对象）

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

data: {

  classObject: {

    active: true,

  }

}

第三种：（绑定一个返回对象的计算属性）

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

export default {

  data() {

    return {

    isActive: true,

    };

  },

  computed: {

  classObject: function () {

    return {

      active: this.isActive,

    }

  }

}

结果渲染为：

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

第四种：（单纯数组方法）

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

 data() {

    return {

      activeClass: "active",

      errorClass: "disActive"

    };

  },

结果渲染为：

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

第五种：（数组与三元运算符结合判断选择需要的class）

<div :class="[isActive?'active':'disActive']"></div>

 data() {

    return {

      isActive: false,

    };

  },

结果渲染为：

<div class="disActive"></div>

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！