Class绑定（:class）

最新推荐文章于 2025-04-17 22:03:43 发布

Jun.27

最新推荐文章于 2025-04-17 22:03:43 发布

阅读量724

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41146808/article/details/124222434

版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了 Vue.js 中如何使用 `v-bind:class`（简写为 `:class`）进行动态 class 绑定。内容涵盖对象语法、数组语法的多种用法，以及在组件上的应用。通过实例展示了如何根据数据变化更新 class 列表，如何结合条件判断切换 class，并解释了在组件上使用 class 属性时的行为。

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

1.对象语法

Case1:

v-bind:class

简写 :class

<!-- active的动态绑定class存在与否取决于数据property isActive的值 -->
<div v-bind:class="{active:isActive}"></div>

<!-- 可在对象中传入多个字段进行动态切换多个class
:class指令可以与普通的class共用 -->
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

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

Case2:

若数据property的值发生变化时，class列表将相应发生更新

例如：如果hasError的值为true，结果如下

<div class="static active text-danger"></div>

Case3:

绑定的数据对象不必定义在模板里，且渲染结果与书写一致：

方式：在<javascript>中data写入数据对象

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

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

Case4:

可以绑定一个返回对象的计算属性

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

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

2.数组语法

Case1:

可以将数组传给:class

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

？？？Case2:

根据条件切换列表中的 class，可以用三元表达式：

                    条件        class1            class2
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加errorClass，但是只有在isActive为非空值时才添加activeClass

Case3:

在数组语法中可以使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

3.用在组件上

Case1:

当在一个自定义组件上使用class属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

使用时添加另外一些class：

<my-component class="baz boo"></my-component>

渲染为：

<p class="foo bar baz boo">Hi</p>

Case2:

带有数据绑定class也适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

当isActive为真值时，HTML 将被渲染成为：

<p class="foo bar active">Hi</p>