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 :
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="'description'"> 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="'description'"> 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: 'blue-theme', }; } }; ---------------------------------------- .blue-theme { color: navy; background: white; }
Dans ce cas, theme
est celui contenant le nom de classe que nous appliquera une variable.
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 ? 'dark-theme' : 'light-theme'" > 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
.
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 ? 'dark-theme' : 'light-theme', ]" > 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
.
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="{ 'dark-theme': darkMode, 'light-theme': !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é ?
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 ? 'dark-theme' : 'light-theme'" /> </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.
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: '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'; } } };
这不仅易于阅读,而且还可以轻松添加新功能并在将来进行重构。
英文原文地址:https://forum.vuejs.org/t/add-a-dynamically-generated-class-name-to-components-class-attribute-from-mixin/27626
为了保证的可读性,本文采用意译而非直译。
相关推荐:
更多编程相关知识,请访问:编程教学!!
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!