Directive v-text de Vue3

Vue3 内置指令Vue3 Directives intégrées

v-textLa directive est utilisée pour mettre à jour le contenu textuel d'un élément, équivalent à définir la propriété de l'élément DOMtextContentpropriété.

Description de base

v-textLa directive définit la valeur de son expression liée comme le contenu textuel de l'élément. C'est l'interpolation de texte la plus couramment utilisée dans les templates Vue{{ }}une autre façon d'écrire.

  • Type attendu: string
  • Description: Met à jour le contenu textuel de l'élément, équivalent à définir la propriété textContent.

Utilisation de base

Exemple

<span v-text="message"></span>
<!-- équivalent à -->
<span>{{ message }}</span>

Exemple

<template>
  <div>
    <p v-text="greeting"></p>
    <p>Utilisation des accolades : {{ greeting }}</p>
  </div>
</template>

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

Différence entre v-text et les accolades

v-textet{{ }}Les principales différences par rapport à l'interpolation avec accolades sont :

  • {{ }}Peut être utilisé dans les nœuds de texte et les attributs
  • v-textNe peut être utilisé que pour le contenu textuel d'un élément
  • v-textÉcrasera le contenu textuel original de l'élément

Exemple

<!-- v-text écrasera "texte original" et n'affichera que la valeur de message -->
<span v-text="message">Le texte original sera écrasé</span>

<!-- Les accolades peuvent préserver d'autres contenus à l'intérieur de l'élément -->
<span>Préfixe {{ message }} Suffixe</span>

Cas d'utilisation

1. Liaison de texte simple

Lorsque vous avez uniquement besoin d'afficher du texte sans mélanger d'autre contenu, v-text est un choix évident :

Exemple

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

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

2. Utilisation avec v-once

v-text peut être utilisé conjointement avec v-once pour effectuer un rendu une seule fois et ne plus se mettre à jour ensuite :

Exemple

<template>
  <div>
    <!-- Effectue un rendu une seule fois ; les modifications de données ultérieures ne seront pas prises en compte -->
    <p v-once v-text="staticText"></p>
    <!-- Réagira aux changements de données -->
    <p v-text="dynamicText"></p>
    <button @click="updateText">Mettre à jour le texte</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
staticText: 'Texte statique, rendu une seule fois',
dynamicText: 'Texte dynamique, sera mis à jour'
    }
  },
  methods: {
    updateText() {
this.dynamicText = 'Texte mis à jour : ' + new Date().toLocaleTimeString()
    }
  }
}
</script>

Notes

Écrasement du contenu d'origine: v-text écrasera complètement tout le contenu textuel à l'intérieur de l'élément. Si vous ne devez mettre à jour qu'une partie du texte, vous devez utiliser l'interpolation par accolades.{{ }}。

Échappement HTML: v-text traite le contenu comme du texte brut et n'interprète pas les balises HTML. Si vous devez afficher du HTML, vous devez utiliser la directive v-html.

Exemple

<!-- Affiche le texte <b>gras</b>, pas en gras -->
<span v-text="'<b>bold</b>'"></span>

<!-- Si vous devez afficher du HTML, utilisez v-html -->
<span v-html="'<b>bold</b>'"></span>

Vue3 内置指令Vue3 Directives intégrées

Autres extensions