怎么在Vue中动态添加类名

这篇“怎么在Vue中动态添加类名”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么在Vue中动态添加类名”文章吧。

静态和动态类

在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';    }  }};

这不仅易于阅读，而且还可以轻松添加新功能并在将来进行重构。

以上就是关于“怎么在Vue中动态添加类名”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。