Директива v-text в Vue3

Vue3 内置指令Встроенные директивы Vue3

v-textДиректива используется для обновления текстового содержимого элемента, что эквивалентно установке свойства DOM-элементаtextContentсвойством.

Базовое описание

v-textДиректива устанавливает значение своего связанного выражения в качестве текстового содержимого элемента. Это наиболее часто используемая текстовая интерполяция в шаблонах Vue.{{ }}другой способ записи.

  • Ожидаемый тип: string
  • Описание: Обновляет текстовое содержимое элемента, что эквивалентно установке свойства textContent.

Базовое использование

Пример

<span v-text="message"></span>
<!-- эквивалентно -->
<span>{{ message }}</span>

Пример

<template>
  <div>
    <p v-text="greeting"></p>
    <p>Использование фигурных скобок: {{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Привет, Vue!'
    }
  }
}
</script>

Разница между v-text и фигурными скобками

v-textи{{ }}Основные отличия от интерполяции в фигурных скобках:

  • {{ }}Может использоваться в текстовых узлах и атрибутах
  • v-textМожет использоваться только для текстового содержимого элемента
  • v-textПерезапишет исходное текстовое содержимое элемента

Пример

<!-- v-text перезапишет "исходный текст" и отобразит только значение message -->
<span v-text="message">Исходный текст будет перезаписан</span>

<!-- Фигурные скобки могут сохранить другое содержимое внутри элемента -->
<span>Префикс {{ message }} Суффикс</span>

Сценарии использования

1. Простая привязка текста

Когда нужно только отобразить текст, не смешивая его с другим содержимым, v-text — очевидный выбор:

Пример

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

<script>
export default {
  data() {
    return {
pageTitle: 'Центр пользователя',
userName: 'Чжан Сань'
    }
  }
}
</script>

2. Использование с v-once

v-text можно использовать вместе с v-once, чтобы отрендерить только один раз и впоследствии не обновлять:

Пример

<template>
  <div>
    <!-- Отрендерится только один раз; последующие изменения данных не приведут к обновлению -->
    <p v-once v-text="staticText"></p>
    <!-- Будет реагировать на изменения данных -->
    <p v-text="dynamicText"></p>
    <button @click="updateText">Обновить текст</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
staticText: 'Статический текст, отображается только один раз',
dynamicText: 'Динамический текст, будет обновляться'
    }
  },
  methods: {
    updateText() {
this.dynamicText = 'Текст обновлён: ' + new Date().toLocaleTimeString()
    }
  }
}
</script>

Примечания

Перезапись исходного содержимого: v-text полностью перезапишет всё текстовое содержимое внутри элемента. Если вам нужно обновить только часть текста, следует использовать интерполяцию с фигурными скобками{{ }}。

Экранирование HTML: v-text обрабатывает содержимое как обычный текст и не разбирает HTML-теги. Если вам нужно отобразить HTML, следует использовать директиву v-html.

Пример

<!-- Отображает <b>bold</b> как текст, а не как жирный -->
<span v-text="'<b>bold</b>'"></span>

<!-- Если вам нужно отобразить HTML, используйте v-html -->
<span v-html="'<b>bold</b>'"></span>

Vue3 内置指令Встроенные директивы Vue3

Другие расширения