Explication détaillée de la méthode d'ajout dynamique de noms de classe dans Vue

Pouvoir ajouter des noms de classe dynamiques aux composants est une fonctionnalité très puissante. Cela nous permet d'écrire plus facilement des thèmes personnalisés, d'ajouter des classes en fonction de l'état du composant et également d'écrire différentes variantes de composants qui dépendent des styles.

Ajouter un nom de classe dynamique est aussi simple que d'ajouter un accessoire :class="classname" au composant. Quel que soit l'évaluation de classname, ce sera le nom de la classe ajouté au composant.

Bien sûr, nous pouvons faire beaucoup plus avec les classes dynamiques dans Vue. Dans cet article, nous discuterons beaucoup :

• Utiliser des classes statiques et dynamiques dans Vue
• Comment utiliser des expressions JS régulières pour évaluer nos classes
• Syntaxe des tableaux pour les noms de classe dynamiques
• Syntaxe des objets
• Générer rapidement des noms de classe
• Comment utiliser des noms de classe dynamiques sur des composants personnalisés

Classes statiques et dynamiques

Dans Vue, nous pouvons ajouter des classes statiques et dynamiques aux composants.

Les classes statiques sont ces classes ennuyeuses qui ne changent jamais, elles seront toujours présentes dans le composant. D'un autre côté, nous pouvons ajouter et supprimer des classes dynamiques de l'application.

Ajouter des classes statiques est exactement la même chose qu'en HTML normal

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

Les classes dynamiques sont très similaires, mais nous devons utiliser la syntaxe d'attribut spéciale de Vue v-bind afin d'exprimer JS Bind à notre classe comme ceci :

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

Ici, vous remarquerez que nous devons ajouter des guillemets supplémentaires autour du nom de la classe dynamique.

C'est parce que la syntaxe v-bind accepte tout ce que nous transmettons comme valeur JS. L'ajout de guillemets garantit que Vue le traite comme une chaîne.

Vue a également une syntaxe abrégée pour v-bind :

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

Ce qui est vraiment étonnant, c'est que vous pouvez même avoir à la fois des classes statiques et dynamiques sur le même composant. Les classes statiques sont utilisées pour des choses dont nous savons qu'elles ne changeront pas, comme le positionnement et la mise en page, et les classes dynamiques sont utilisées pour des choses comme les thèmes :

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

export default {
  data() {    return {
      theme: &#39;blue-theme&#39;,
    };
  }
};
----------------------------------------
.blue-theme {
  color: navy;
  background: white;
}

Dans ce cas, theme est celui contenant le nom de classe que nous appliquera une variable.

Nom de classe conditionnel

Puisque v-bind peut accepter n'importe quelle expression JS, nous pouvons faire des choses vraiment sympas avec. Ce que je préfère, c'est l'utilisation d'expressions ternaires dans les modèles, elles ont tendance à être très claires et lisibles.

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

Si darkMode est true, alors utilisez dark-theme comme nom de classe. Sinon, on choisit light-theme.

Utiliser la syntaxe du tableau

Si vous devez ajouter de nombreuses classes différentes de manière dynamique, vous pouvez utiliser des tableaux ou des objets. Les deux méthodes sont utiles, regardons d'abord la méthode array.

Puisque nous évaluons simplement une expression JS, nous pouvons combiner les expressions que nous venons d'apprendre avec la syntaxe de tableau

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

Nous utilisons des tableaux pour définir deux classes dynamiques sur ce nom d'élément. La valeur de fontTheme est un nom de classe qui changera l'apparence de la police. Dans l'exemple précédent, nous pouvons toujours utiliser la variable darkMode pour basculer entre dark-theme et light-theme.

Utilisation de la syntaxe des objets

Nous pouvons même utiliser des objets pour définir des listes de classes dynamiques, ce qui nous donne plus de flexibilité.

Pour toute paire clé/valeur dont la valeur est vraie, il utilisera la clé comme nom de classe. Regardons un exemple de syntaxe d'objet :

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

Notre objet contient deux clés : dark-theme et light-theme. Semblable à la logique que nous avons implémentée précédemment, nous souhaitons basculer entre ces thèmes en fonction de la valeur de darkMode.

Lorsque darkMode est true, dark-theme sera appliqué à notre élément en tant que nom de classe dynamique. Mais light-them ne sera pas appliqué car la valeur !darkMode est false.

Nous avons maintenant couvert les bases de l'ajout dynamique de classes aux composants Vue. Alors, comment puis-je faire cela en utilisant mon propre composant personnalisé ?

Travailler avec des composants personnalisés

Supposons que nous ayons un composant personnalisé dans l'application

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

Que devons-nous faire si nous voulons ajouter dynamiquement une classe qui modifiera la gestion du thème ? C'est en fait très simple.

Il suffit d'ajouter l'attribut :class comme avant.

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;"
  />
</template>

fonctionne car Vue définit la classe directement sur l'élément racine de MovieList.

Lors de la définition de props sur un composant, Vue comparera ces accessoires aux accessoires spécifiés par le composant dans sa section props. S'il y a une correspondance, elle sera considérée comme un accessoire régulier. Sinon, Vue l'ajoutera à l'élément racine du DOM.

Ici, puisque MovieList ne spécifie pas d'attribut class, Vue sait qu'il doit être défini sur l'élément racine.

Cependant, nous pouvons faire des choses plus avancées avec des noms de classes dynamiques.

Générer rapidement des noms de classe

Nous avons couvert de nombreuses façons différentes d'ajouter ou de supprimer des noms de classe de manière dynamique. Mais qu’en est-il du nom de classe généré dynamiquement lui-même ?

Supposons qu'il existe un composant Button qui fournit 20 styles CSS différents pour tous les différents types de boutons.

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

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


export default {
  data() {
    return {
      theme: &#39;blue-theme&#39;,
    };
  }
};

.blue-theme {
  color: navy;
  background: white;
}

我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对Button组件执行此操作，则可以执行以下简单操作：

<template>
  <button
    @click="$emit(&#39;click&#39;)"
    class="button"
    :class="theme"
  >
    {{ text }}
  </button>
</template>

export default {
  props: {
    theme: {
      type: String,
      default: &#39;default&#39;,
    }
  }
};

.default {}

.primary {}

.danger {}

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

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

使用计算属性来简化类

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

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

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

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

英文原文地址：https://forum.vuejs.org/t/add-a-dynamically-generated-class-name-to-components-class-attribute-from-mixin/27626

为了保证的可读性，本文采用意译而非直译。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!