Директива v-html в Vue3
Встроенные директивы Vue3v-htmlДиректива используется для обновления innerHTML элемента, отображая содержимое как необработанный HTML.
Базовое описание
v-htmlДиректива вставляет значение своего связанного выражения в элемент как HTML. Это очень полезно, когда нужно отобразить содержимое форматированного текста.
- Ожидаемый тип: string
- Функция: обновляет innerHTML элемента, что приводит к отображению необработанного HTML.
Сценарии использования
1. Отображение содержимого форматированного текста
Когда HTML-содержимое получено с сервера и его нужно отобразить:
Пример
<template>
<div>
<h2>Содержимое статьи</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>Что такое Vue.js</h3>
<p>Vue.js — это прогрессивный JavaScript-фреймворк.</p>
`
}
}
}
</script>
<div>
<h2>Содержимое статьи</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>Что такое Vue.js</h3>
<p>Vue.js — это прогрессивный JavaScript-фреймворк.</p>
`
}
}
}
</script>
Предупреждение о безопасности
Проблемы безопасности: Динамический рендеринг произвольного HTML может привести к XSS-атакам (Cross-Site Scripting). Всегда убеждайтесь, что содержимое v-html заслуживает доверия, и никогда не используйте v-html для контента, отправленного пользователями.
Отличие от v-text
| Директива | Функция | Пример |
|---|---|---|
| v-text | Отображает содержимое как обычный текст | v-text="'test'" отображает <b>test</b> |
| v-html | Интерпретирует содержимое как HTML | v-html="'test'" отображает test (жирным) |
Другие расширения