详解Vue中动态添加类名的方法-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题，根据组件的状态添加类，还可以编写依赖于样式的组件的不同变体。

添加动态类名与在组件中添加 prop :class="classname"一样简单。无论classname的计算结果是什么，都将是添加到组件中的类名。

当然，对于Vue中的动态类，我们可以做的还有很多。在本文中，我们将讨论很多内容：

在 Vue 中使用静态和动态类
如何使用常规的 JS 表达式来计算我们的类
动态类名的数组语法
对象语法
快速生成类名
如何在自定义组件上使用动态类名

静态和动态类

在Vue中，我们可以向组件添加静态类和动态类。

静态类是那些永远不会改变的乏味类，它们将始终出现在组件中。另一方面，我们可以在应用程序中添加和删除动态类。

添加静态类与在常规HTML中所做的是完全相同的

<template>
  <span class="description">
    This is how you add static classes in Vue.
  </span>
</template>

动态类非常类似，但是我们必须使用Vue的特殊属性语法v-bind，以便将 JS 表达式绑定到我们的类:

<template>
  <span v-bind:class="'description'">
    This is how you add static classes in Vue.
  </span>
</template>

这里你会注意到，我们必须在动态类名周围添加额外的引号。

这是因为v-bind语法接受我们作为 JS 值传递的任何内容。添加引号可以确保Vue将其视为字符串。

Vue还有一个v-bind的简写语法:

<template>
  <span :class="'description'">
    This is how you add static classes in Vue.
  </span>
</template>

真正奇妙的是，您甚至可以在同一个组件上同时拥有静态类和动态类。静态类用于我们知道不会更改的内容，比如定位和布局，动态类用于主题之类的：

<template>
  <span    class="description"
    :class="theme"
  >
    This is how you add static classes in Vue.
  </span>
</template>
 
export default {
  data() {    return {
      theme: 'blue-theme',
    };
  }
};
----------------------------------------
.blue-theme {
  color: navy;
  background: white;
}

在本例中，theme是包含我们将应用的类名的变量。

有条件的类名

由于v-bind可以接受任何 JS 表达式，因此我们可以用它做一些非常酷的事情。我最喜欢的是在模板中使用三元表达式，它往往是非常干净和可读的。

<template>
  <span    class="description"
    :class="darkMode ? 'dark-theme' : 'light-theme'"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

如果darkMode为true，则将dark-theme用作我们的类名。否则，我们选择light-theme。

使用数组语法

如果需要动态添加许多不同的类，可以使用数组或对象。这两种方法都很有用，我们先来看数组方式。

因为我们只是在计算一个 JS 表达式，所以可以将我们刚刚学到的表达式与数组语法结合起来

<template>
  <span    class="description"
    :class="[
      fontTheme,
      darkMode ? 'dark-theme' : 'light-theme',
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

我们使用数组在这个元素上设置两个动态类名。fontTheme的值是一个类名，它将改变字体的外观。在前面的例子中，我们仍然可以使用darkMode变量在dark-theme和light-theme之间切换。

使用对象语法

我们甚至可以使用对象来定义动态类的列表，这给了我们更多的灵活性。

对于任何值为真的键/值对，它将把键用作类名。让我们看一个对象语法的例子:

<template>
  <span    class="description"
    :class="{
      'dark-theme': darkMode,
      'light-theme': !darkMode,
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>