Vue3 v-text Direktive

Vue3 内置指令Vue3 Eingebaute Direktiven

v-textDie Direktive wird verwendet, um den Textinhalt eines Elements zu aktualisieren, was dem Setzen des DOM-Elements entsprichttextContentEigenschaft.

Grundlegende Beschreibung

v-textDie Direktive legt den Wert ihres gebundenen Ausdrucks als Textinhalt des Elements fest. Sie ist die am häufigsten verwendete Textinterpolation in Vue-Vorlagen{{ }}eine andere Schreibweise.

  • Erwarteter Typ: string
  • Beschreibung: Aktualisiert den Textinhalt des Elements, was dem Setzen der textContent-Eigenschaft entspricht.

Grundlegende Verwendung

Beispiel

<span v-text="message"></span>
<!-- entspricht -->
<span>{{ message }}</span>

Beispiel

<template>
  <div>
    <p v-text="greeting"></p>
    <p>Verwendung von geschweiften Klammern: {{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello Vue!'
    }
  }
}
</script>

Unterschied zwischen v-text und geschweiften Klammern

v-textund{{ }}Die wichtigsten Unterschiede zur Interpolation mit geschweiften Klammern sind:

  • {{ }}Kann in Textknoten und Attributen verwendet werden
  • v-textKann nur für den Textinhalt eines Elements verwendet werden
  • v-textÜberschreibt den ursprünglichen Textinhalt des Elements

Beispiel

<!-- v-text überschreibt "original text" und zeigt nur den Wert von message an -->
<span v-text="message">Der ursprüngliche Text wird überschrieben</span>

<!-- Geschweifte Klammern können anderen Inhalt innerhalb des Elements beibehalten -->
<span>Präfix {{ message }} Suffix</span>

Anwendungsfälle

1. Einfache Textbindung

Wenn Sie nur Text anzeigen müssen, ohne anderen Inhalt zu vermischen, ist v-text eine klare Wahl:

Beispiel

<template>
  <div>
    <h1 v-text="pageTitle"></h1>
    <span v-text="userName"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
pageTitle: 'Benutzerzentrum',
userName: 'Zhang San'
    }
  }
}
</script>

2. Verwendung mit v-once

v-text kann zusammen mit v-once verwendet werden, um nur einmal zu rendern und danach nicht zu aktualisieren:

Beispiel

<template>
  <div>
    <!-- Wird nur einmal gerendert; nachfolgende Datenänderungen werden nicht aktualisiert -->
    <p v-once v-text="staticText"></p>
    <!-- Wird auf Datenänderungen reagieren -->
    <p v-text="dynamicText"></p>
    <button @click="updateText">Text aktualisieren</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
staticText: 'Statischer Text, wird nur einmal gerendert',
dynamicText: 'Dynamischer Text, wird aktualisiert'
    }
  },
  methods: {
    updateText() {
this.dynamicText = 'Text aktualisiert: ' + new Date().toLocaleTimeString()
    }
  }
}
</script>

Hinweise

Überschreiben des ursprünglichen Inhalts: v-text überschreibt den gesamten Textinhalt innerhalb des Elements vollständig. Wenn Sie nur einen Teil des Textes aktualisieren müssen, sollten Sie die Interpolation mit geschweiften Klammern verwenden{{ }}。

HTML-Escaping: v-text behandelt den Inhalt als reinen Text und parst keine HTML-Tags. Wenn Sie HTML rendern müssen, sollten Sie die v-html-Direktive verwenden.

Beispiel

<!-- Zeigt <b>bold</b>-Text an, nicht fett -->
<span v-text="'<b>bold</b>'"></span>

<!-- Wenn Sie HTML rendern müssen, verwenden Sie v-html -->
<span v-html="'<b>bold</b>'"></span>

Vue3 内置指令Vue3 Eingebaute Direktiven

Andere Erweiterungen