[译]如何在Vue中动态添加类名

做者：Michael Thiessen

译者：前端小智

来源：forum.vuejs.org/

---

点赞再看，养成习惯

本文 GitHub github.com/qq449245884… 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

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

添加动态类名与在组件中添加 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>
复制代码

咱们的对象包含两个键:dark-theme和light-theme。与咱们以前实现的逻辑相似，咱们但愿基于darkMode的值在这些主题之间切换。

当darkMode为 true 时，会把dark-theme做为一个动态类名应用于咱们的元素。可是light-them不会被应用，由于!darkMode 值为false。

如今咱们已经介绍了向Vue组件动态添加类的基础知识。那么如何使用本身的自定义组件来作到这一点？

与自定义组件一块儿使用

假设咱们在 app 中有一个自定义组件

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
  />
</template>
复制代码

若是咱们要动态添加一个将更改主题的类，咱们该怎么办？其实很简单。

咱们只须要像之前那样添加:class属性

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="darkMode ? 'dark-theme' : 'light-theme'"
  />
</template>
复制代码

之因此起做用，是由于Vue直接在MovieList的根元素上设置类。

在组件上设置props时，Vue会将这些props与组件在其props部分中指定的props进行比较。 若是有匹配项，它将做为常规props传递。 不然，Vue会将其添加到根DOM元素中。

在这里，因为MovieList没有指定class属性，所以Vue知道应该在根元素上进行设置。

不过，咱们能够用动态类名作一些更高级的事情。

快速生成类名

咱们已经介绍了许多动态添加或删除类名的不一样方法。可是动态生成类名自己又如何呢？

假设有一个Button组件，它为全部不一样类型的按钮提供20种不一样的CSS样式。

你可能不想花一成天的时间把每一项都写出来，也不想把开关的逻辑都写出来。相反，咱们将动态生成要应用的类的名称。

<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;
}
复制代码

咱们能够设置一个变量来包含咱们想要的任何类名的字符串。若是咱们想对Button组件执行此操做，则能够执行如下简单操做：

<template>
  <button
    @click="$emit('click')"
    class="button"
    :class="theme"
  >
    {{ text }}
  </button>
</template>

export default {
  props: {
    theme: {
      type: String,
      default: 'default',
    }
  }
};

.default {}

.primary {}

.danger {}
复制代码

如今，使用Button组件的任何人均可以将theme属性设置为他们想要使用的任何主题。

若是没有设置任何类，它将添加.default类。若是将其设置为primary，则会添加.primary类。

使用计算属性来简化类

最终，模板中的表达式将变得过于复杂，并将开始变得很是混乱和难以理解。幸运的是，咱们有一个简单的解决方案，就是使用计算民属性：

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="class"
  />
</template>

export default {
  computed: {
    class() {
      return darkMode ? 'dark-theme' : 'light-theme';
    }
  }
};

复制代码

这不只易于阅读，并且还能够轻松添加新功能并在未来进行重构。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文:forum.vuejs.org/t/add-a-dyn…

---

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。