总结vue中动态class的几种写法

最新推荐文章于 2025-07-24 23:39:43 发布

以沫wh

最新推荐文章于 2025-07-24 23:39:43 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：工具方法文章标签： vue.js es6

本文链接：https://blog.csdn.net/wh13821662259/article/details/116238644

工具方法专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue中如何使用对象语法和数组语法实现动态class。对象语法允许根据isActive的值来决定active类是否存在，同时能与普通class共存，支持绑定数据对象和计算属性。数组语法中，可以通过数组单独或与三元运算符结合使用，注意在不同情况下class的引号使用要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对象语法（这里的active加不加单引号都可以）

1下面的语法表示 active 这个 class 存在与否将取决于数据 isActive 的 truthiness。

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="{ active: isActive, sort: isSort }"></div>

2 v-bind:class 指令也可以与普通的 class attribute 共存

<div
  class="static"
  v-bind:class="{ active: isActive }"
></div>

3 绑定的数据对象不必内联定义在模板里：

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

data() {
	return {
		classObject: {
    		active: true,
   			static: false
 	 	}
	} 
}

4 也可以在这里绑定一个返回对象的计算属性

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

data: {
	return {
	    isActive: true,
  		error: null
	} 
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      static: this.error
    }
  }
}

数组语法

1 只有数组

<div :class="[isActive,isSort]"></div>

data() {
  return{
    isActive:'active',
    isSort:'sort'
 }
}

渲染为

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

2 数组与三元运算符结合
注意：

三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染,
在数组里面的类名需要加上引号, 否则不能正确渲染,

// 当isActive 为true时class为activeClass， false时为errorClass，otherClass是一直存在
<div v-bind:class="[isActive ? 'activeClass': 'errorClass', 'otherClass']"></div>

3 数组对象结合动态判断
注意：当在数组中使用对象语法时，前面这个active在对象里面可以不加单引号，但是后面这个sort依旧要加单引号