Directiva v-text de Vue3

Vue3 内置指令Directivas integradas de Vue3

v-textLa directiva se usa para actualizar el contenido de texto del elemento, lo que equivale a establecer eltextContentatributo del elemento DOM.

Descripción básica

v-textLa directiva establece el valor de su expresión vinculada como el contenido de texto del elemento. En las plantillas de Vue, la interpolación de texto más común{{ }}se puede escribir de otra manera.

  • Tipo esperado: string
  • Función: Actualiza el contenido de texto del elemento, equivalente a establecer la propiedad textContent.

Uso básico

Ejemplo

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

Ejemplo

<template>
  <div>
    <p v-text="greeting"></p>
    <p>Usando llaves: {{ greeting }}</p>
  </div>
</template>

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

Diferencia entre v-text y las llaves

v-texty{{ }}La principal diferencia de la interpolación con llaves es:

  • {{ }}Se puede usar en nodos de texto y en atributos.
  • v-textSolo se puede usar en el contenido de texto del elemento.
  • v-textReemplazará el contenido de texto existente del elemento.

Ejemplo

<!-- v-text reemplaza "texto original" y solo muestra el valor de message -->
<span v-text="message">El texto original será reemplazado.</span>

<!-- Las llaves pueden conservar otro contenido dentro del elemento -->
<span>Prefijo {{ message }} sufijo</span>

Casos de uso

1. Enlace de texto simple

Cuando solo se necesita mostrar texto sin mezclar otro contenido, v-text es una opción clara:

Ejemplo

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

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

2. Uso junto con v-once

v-text se puede usar junto con v-once, se renderiza una sola vez y no se actualiza después:

Ejemplo

<template>
  <div>
    <!-- Se renderiza una sola vez, los cambios posteriores de data no se actualizarán -->
    <p v-once v-text="staticText"></p>
    <!-- Responderá a los cambios de datos -->
    <p v-text="dynamicText"></p>
    <button @click="updateText">Actualizar texto</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
staticText: 'Texto estático, se renderiza una sola vez',
dynamicText: 'Texto dinámico, se actualizará'
    }
  },
  methods: {
    updateText() {
this.dynamicText = 'Texto actualizado: ' + new Date().toLocaleTimeString()
    }
  }
}
</script>

Notas

Reemplazo de contenido existente: v-text reemplaza por completo todo el contenido de texto dentro del elemento. Si solo necesita actualizar parte del texto, debe usar la interpolación con llaves.{{ }}。

Escape de HTML: v-text trata el contenido como texto plano y no interpreta las etiquetas HTML. Si necesita renderizar HTML, debe usar la directiva v-html.

Ejemplo

<!-- Muestra el texto <b>negrita</b>, no negrita -->
<span v-text="'<b>Negrita</b>'"></span>

<!-- Si necesita renderizar HTML, use v-html -->
<span v-html="'<b>Negrita</b>'"></span>

Vue3 内置指令Directivas integradas de Vue3

Otras extensiones