vue动态绑定class

概述vue动态绑定class的最常用几种方式：  第一种：（最简单的绑定） 1.绑定单个class  html部分： <div :class="{‘active‘:isActive}"></div>  js部分：判断是否绑定一个active data() { return { isActive: true }; } 结果渲染为： <div class="act 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>

总结

以上是内存溢出为你收集整理的vue动态绑定class全部内容，希望文章能够帮你解决vue动态绑定class所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。