Warum wird nicht empfohlen, in Vue eine leere Zeichenfolge als Klassennamen zu verwenden?

Wenn wir einen ternären Ausdruck verwenden, um eine Klasse für ein DOM-Element festzulegen, führt die Verwendung einer leeren Zeichenfolge dazu, dass eine leere Klasse ohne gerenderten Wert ausgegeben wird. Um dies zu vermeiden, können Sie null anstelle einer leeren Zeichenfolge verwenden.

<!-- ❌ -->
<div :class="istfett ? 'fett' : ''">
<!-- <div-Klasse> -->

<!-- ✅ -->
<div :class="istfett ? 'fett' : null">
<!-- <div> -->

Vergleichen Sie die leere Zeichenfolge '' und null

Analysieren Sie weiterhin die beiden obigen Codezeilen

Fall 1: Verwenden einer leeren Zeichenfolge ''

Wir verwenden den ternären Operator, um zu entscheiden, ob die Klasse an das Element gebunden werden soll. Wenn isBold wahr ist, wird fett zurückgegeben. Andernfalls wird '' zurückgegeben.

<div :class="istfett ? 'fett' : ''"></div>

Daten() {
  zurückkehren {
    isBold: false
  }
}

Zu diesem Zeitpunkt ist das Rendering-Ergebnis wie folgt

<div-Klasse></div>
<!-- 😱 Leere Klasse -->

Wenn isBold wahr ist, ist das Rendering-Ergebnis wie folgt

<div Klasse="fett"></div>

Fall 2: Verwenden von Null

Schauen Sie sich die Rendering-Ergebnisse mit null an

<div :class="istfett ? 'fett' : null"></div>

Daten() {
  zurückkehren {
    isBold: false
  }
}

Die Rendering-Ergebnisse sind wie folgt

<div></div>
<!-- ✅ Sehr gut, keine leere Klasse>

Wenn isBold false ist, ist das Rendering-Ergebnis wie folgt

<div Klasse="fett"></div>

Fall 3: Verwendung von undefined

undefined hat die gleiche Wirkung wie null

<div: class="isBold? 'fett': nicht definiert"></div>

<div></div>
<!-- ✅ Sehr gut, keine leere Klasse>

Über den falschen Wert

Wenn der Wert von isBold der folgende ist, gibt der ternäre Ausdruck ebenfalls einen falschen Wert zurück

FALSCH
undefiniert
Null
NaN
0
"" oder '' oder `` (leere Zeichenfolge)

Bind-Klasse mithilfe eines Objekts

Die Verwendung von Objekten ist lesbarer

<div :class="{ fett: ist fett }"></div>

Ternäre Ausdrücke lassen sich jedoch am besten zum Binden komplexer Klassen verwenden.

<div :class="isActive ? 'unterstrichen fett' : null"></div>

Verwenden Sie && zum Binden der Klasse

Schauen wir uns eine andere Situation an

<div :class="isBold && 'fett'"></div>

&& ist nicht nur ein logischer Operator, es kann auch einen Wert zurückgeben, genau wie der Code oben. Wenn isBold wahr ist, wird fett zurückgegeben. Aber was ist, wenn isBold falsch ist?

Fall 1: isBold ist false

<div :class="isBold && 'fett'"></div>

Dieses Mal wird eine leere Klasse zurückgegeben.

<div-Klasse></div>

Fall 2: isBold ist null

<div :class="isBold && 'fett'"></div>

Es wird keine leere Klasse geben, wenn sie null ist

<div></div>

Fall 3: isBold ist nicht definiert

<div :class="isBold && 'fett'"></div>

Es wird keine leere Klasse geben, wenn sie nicht definiert ist

<div></div>

Die obige Situation wird nicht durch && verursacht, es wird nur verwendet, um Beurteilungen vorzunehmen und Werte zurückzugeben.

Wenn wir also vermeiden möchten, dass bei der Verwendung von && eine leere Klasse zurückgegeben wird, verwenden wir am besten null oder undefined.

Ich empfehle jedoch, zum Festlegen der Klasse die Objekt- oder Array-Bindungssyntax zu verwenden.

Ist es falsch, eine leere Klasse zu haben?

Im W#C-Standard sind auch leere Klassen erlaubt.

<!-- Keine Fehler -->
<div-Klasse>…</div>

<!-- Keine Fehler -->
<div>…</div>

Die HTML-Syntax verbietet die Verwendung leerer Attribute nicht.

Aus Gründen der Lesbarkeit des Codes wird jedoch empfohlen, keine leeren Attribute zu verwenden, insbesondere wenn Sie DOM-Attribute bearbeiten müssen, um Urteile zu fällen.

Leere Eigenschaften können leicht zu subtilen Fehlern führen

e.Ziel.Klassenliste

e.Klassenname

img.src

...

Aber...
Leere ID-Attribute sind nicht zulässig.

<!-- Fehler -->
<div-ID>…</div>

<!-- Fehler -->
<div id="">...</div>

<!-- Richtig -->
<div id="name">...</div>

❌ Fehler: Eine ID darf keine leere Zeichenfolge sein.

Damit ist dieser Artikel darüber, warum es nicht empfohlen wird, einen leeren String als Klassennamen in Vue zu verwenden, abgeschlossen. Weitere Informationen zur Verwendung eines leeren Strings als Klassennamen in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!