Die Möglichkeit, Komponenten dynamische Klassennamen hinzuzufügen, ist eine sehr leistungsstarke Funktion. Es erleichtert uns das Schreiben benutzerdefinierter Designs, das Hinzufügen von Klassen basierend auf dem Status der Komponente und das Schreiben verschiedener Variationen von Komponenten, die von Stilen abhängen.
Das Hinzufügen eines dynamischen Klassennamens ist so einfach wie das Hinzufügen von prop :class="classname" zur Komponente. Was auch immer classname ergibt, ist der Klassenname, der der Komponente hinzugefügt wird. :class="classname"一样简单。无论classname的计算结果是什么，都将是添加到组件中的类名。
当然，对于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
<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;
}v-bind verwenden, um JS-Ausdrücke zu binden unsere Klasse: 🎜<template>
<button
@click="$emit('click')"
class="button"
:class="theme"
>
{{ text }}
</button>
</template>
export default {
props: {
theme: {
type: String,
default: 'default',
}
}
};
.default {}
.primary {}
.danger {}v-bind-Syntax alles akzeptiert, was wir als JS-Wert übergeben. Durch das Hinzufügen von Anführungszeichen wird sichergestellt, dass Vue es als Zeichenfolge behandelt. 🎜🎜Vue hat auch eine Abkürzungssyntax für v-bind: 🎜<template>
<MovieList
:movies="movies"
:genre="genre"
:class="class"
/>
</template>
export default {
computed: {
class() {
return darkMode ? 'dark-theme' : 'light-theme';
}
}
};theme der Klassenname, der das enthält Name werden wir variabel anwenden. 🎜v-bind jeden JS-Ausdruck akzeptieren kann, können wir einige wirklich coole Dinge damit machen. Am liebsten verwende ich ternäre Ausdrücke in Vorlagen. Sie sind in der Regel sehr sauber und lesbar. 🎜rrreee🎜Wenn darkMode true ist, dann wird dark-theme als unser Klassenname verwendet. Ansonsten wählen wir light-theme. 🎜fontTheme ist ein Klassenname, der das Erscheinungsbild der Schriftart ändert. Im vorherigen Beispiel können wir weiterhin die Variable darkMode verwenden, um zwischen dark-theme und light-theme zu wechseln. 🎜dark-theme und light-theme. Ähnlich wie bei der zuvor implementierten Logik möchten wir basierend auf dem Wert von darkMode zwischen diesen Themen wechseln. 🎜🎜Wenn darkMode true ist, wird dark-theme als dynamischer Klassenname auf unsere Elemente angewendet. Aber light-them wird nicht angewendet, da der !darkMode-Wert false ist. 🎜🎜Jetzt haben wir die Grundlagen des dynamischen Hinzufügens von Klassen zu Vue-Komponenten behandelt. Wie kann ich das also mit meiner eigenen benutzerdefinierten Komponente tun? 🎜:class wie zuvor hinzufügen. 🎜rrreee🎜Das funktioniert, weil Vue die Klasse direkt auf das Stammelement von MovieList setzt. 🎜🎜Wenn Sie props für eine Komponente festlegen, vergleicht Vue diese Requisiten mit den von der Komponente in ihrem Abschnitt props angegebenen Requisiten. Wenn es eine Übereinstimmung gibt, wird diese als reguläre Requisite weitergegeben. Andernfalls fügt Vue es dem Root-DOM-Element hinzu. 🎜🎜Da MovieList kein class-Attribut angibt, weiß Vue, dass es auf das Stammelement gesetzt werden sollte. 🎜🎜Allerdings können wir mit dynamischen Klassennamen einige fortgeschrittenere Dinge tun. 🎜Button-Komponente, die 20 verschiedene CSS-Stile für alle verschiedenen Arten von Schaltflächen bereitstellt. 🎜你可能不想花一整天的时间把每一项都写出来，也不想把开关的逻辑都写出来。相反，我们将动态生成要应用的类的名称。
<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
为了保证的可读性，本文采用意译而非直译。
相关推荐：
更多编程相关知识，请访问：编程教学！！
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Methode zum dynamischen Hinzufügen von Klassennamen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
