vue动态绑定class的最常用几种方式

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': harror }"></div>

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

  data() {    return {      isactive: true,      harror: true    };  }

结果渲偏旁大全染为：震耳欲聋

<div class="activeone activetwo activethree"></div>

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

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

data: {  classobjec二年级作文我的好朋友t: {    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: fal,    };  },

结果渲染为：

<div class="disalayctive"></div>