Vue中使用 class 类样式的方法详情

下面我将详细讲解在Vue中使用class样式的方法：

一、Vue中绑定class样式的常见方法

1. 绑定单个class样式

使用v-bind或:直接绑定class属性，即class="[className]"，[className]为你想要应用的样式类名。

比如我们有一个<div>元素，需要加上red样式：

<template>
  <div v-bind:class="'red'"></div>
</template>

等同于：

<template>
  <div class="red"></div>
</template>

2. 绑定多个class样式

使用v-bind或:绑定class属性，即class="[classObj]"，其中[classObj]为一个对象，包含多个属性，每个属性相当于一个class样式类，属性值为Boolean类型，true表示应用该样式类，false表示不应用。

比如，我们有一个<div>元素，需要同时添加red和bold两个样式：

<template>
  <div v-bind:class="{ red: true, bold: true }"></div>
</template>

等同于：

<template>
  <div class="red bold"></div>
</template>

注意：如果属性值需要动态绑定，则需要使用Vue的计算属性方法。

二、示例说明

1. 动态绑定class样式

在Vue中，可以使用计算属性将class的绑定更加灵活。下面我们来看一个例子：给按钮设置不同颜色。

<template>
  <div>
    <button v-bind:class="color">{{ text }}</button>
    <button v-bind:class="color"><span>{{ text }}</span></button>
  </div>
</template>

<script>
export default {
  name: 'Button',
  data() {
    return {
      text: 'Click',
      colorObj: {
        primary: 'btn-primary',
        danger: 'btn-danger'
      },
      bgColor: 'primary'
    }
  },
  computed: {
    color() {
      return 'btn ' + this.colorObj[this.bgColor]
    }
  }
}
</script>

上面代码中使用计算属性color()，在根据bgColor值动态绑定样式，保持代码的简洁性和易维护性。

2. 使用第三方UI库

对于一些大型的项目，需要使用第三方UI框架，例如Element UI、Ant Design等。这时，我们只需要在<template>中绑定对应的样式类即可。

比如在使用Element UI时，我们需要给一个表单元素添加标签样式：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="Username" prop="username">
      <el-input v-model="form.username" class="login-input" placeholder="请输入用户名"></el-input>
    </el-form-item>
  </el-form>
</template>

上面代码中，我们使用了Element UI提供的表单组件，使用起来非常方便。其中，<el-input>组件并没有直接绑定class属性，但我们仍然可以使用css的类选择器来添加自定义样式。上面代码中，我给该组件加上了一个名为login-input的样式，将原本的input框设置为圆角矩形。