Vue.js 学习(5) -- Class 与 Style 的增强功能_vue style 设置的高于 class设置的-优快云博客

本文链接：https://blog.youkuaiyun.com/u014328357/article/details/72628158

本文详细介绍了Vue.js框架中v-bind指令的应用方法，包括如何利用v-bind为HTML元素设置class和style属性。通过对象和数组两种方式，展示了如何根据不同条件动态地更改元素的样式。

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

我们已经知道，可以使用v-bind来为html元素设置属性。
于此同时，Vue.js 专门增强了指令v-bind，来设置html元素的属性class和style。

HTML class

1、参数为对象

基本写法：

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

我们可以给isActive附一个布尔值，当为true时，class=”active”；反之，如果isActive为false，那么class=”“。

多个类名同理，只是格式稍有不同，并且，v-bind:class可以和普通class共存：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

如果类比较多，我们可以直接替换为：

<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、参数为数组

刚才我们传给v-bind:class的参数是一个对象，然而，我们还可以将数组传给class指令。

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

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

这段代码将会渲染为：

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

futhermore, 数组与对象的形式也可以混用：

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

内联样式

内联样式的指令形式为v-bind:style, 和正常的CSS不同的是，它可以用驼峰式／短横线分隔符来写CSS属性：

采用驼峰式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

更加简洁的写法：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

和class一样，style指令也可以接受数组：

<div v-bind:style="[baseStyles, overridingStyles]">