So richten Sie mit Vue mehrere Klassen ein

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von Vue zum Binden einzelner oder mehrerer Klassennamen vorgestellt. Er ist sehr gut und hat Referenzwert.

1, Binden Sie einen einzelnen Klassennamen in Form einer Variablen

Das Binden eines einzelnen Klassennamens in Vue ist einfach, schreiben Sie ihn einfach direkt

<template>
 <p id="app">
 <!-- 因为是自定义属性，所以要用到 v-bind ，简写为 : -->
 <!-- 3.将 box 绑定给 p -->
 <p :class="box"></p>
 </p>
</template>

<script>
export default {
 name: &#39;app&#39;,
 data () {
 return {
 // 2.在 data 中把 yellow 赋给 box
 box: &#39;yellow&#39;
 }
 }
}
</script>

<style>
/* 1.在样式表中写好样式 */
.yellow{
 width: 200px;
 height: 200px;
 background: #ff0;
}
</style>

Verwenden Sie Vue, um einen einzelnen Klassennamen zu binden

2. Binden Sie mehrere Klassennamen in Array-Form

Zum Beispiel, wenn Wir möchten diesem p einen Schatten hinzufügen

Schreiben Sie den Stil mit Stil

.shadow{
 box-shadow: 10px 10px 5px 0 #999;
}

Fügen Sie weiterhin Datenobjekte in Daten hinzu

<script>
export default {
 name: &#39;app&#39;,
 data () {
 return {
 box: &#39;yellow&#39;,
 shadow:&#39;shadow&#39;
 }
 }
}
</script>

Binden Sie den Klassennamen in der Form von ein Array im Tag

<template>
 <p id="app">
 <p :class="[box,shadow]"></p>
 </p>
</template>

Das ist in Ordnung.

Mehrere Klassennamen in Array-Form binden

3. Mehrere Klassennamen in JSON-Form binden

Diese Methode ist praktisch, um zu bestimmen, welcher Stil angezeigt werden soll, wenn mehrere Klassennamen gleichzeitig hinzugefügt werden.

Schreiben Sie zuerst den Stil.

<style>
.yellow{
 width: 200px;
 height: 200px;
 background: #ff0;
}
.shadow{
 box-shadow: 10px 10px 5px 0 #999;
}
</style>

Fügen Sie den Daten ein digitales Objekt hinzu Urteil

<script>
export default {
 name: &#39;app&#39;,
 data () {
 return {
 show1:true,
 show2:false
 }
 }
}
</script>

Binden Sie es in Form von JSON an die Klasse, ändern Sie die Werte von show1 und show2 durch boolesche Werte, um den Status von p zu steuern

<template>
 <p id="app">
 <p :class="{yellow:show1,shadow:show2}"></p>
 </p>
</template>

Verwenden Sie JSON, um mehrere Klassen zu binden

ps: vue löst domänenübergreifende Probleme

Ändern Sie die Konfigurationsdatei /index.js

proxyTable: {
// 请求到 '/device' 下 的请求都会被代理到 target： http://debug.xxx.com 中
'/v1/*': {
target: 'https://api.tiaotiao5.com',
secure: true, // 接受 运行在 https 上的服务
changeOrigin: true
}
}

Das Obige ist der gesamte Inhalt, den ich zusammengefasst habe, ich hoffe, er wird für alle hilfreich sein

Verwandte Artikel:

So implementieren Sie Multiplexing in JavaScript Inherit

Über die Umsetzung des Online-Kundenservice von Wangwang

Wie man Web-Maus-Effekte implementiert (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo richten Sie mit Vue mehrere Klassen ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!