v-html для вставки HTML

В Petite-Vue директива v-html предназначена для динамической вставки HTML-кода в DOM. Она позволяет привязывать значение переменной к содержимому элемента, интерпретируя строку как HTML, а не как обычный текст.

<div id="app" v-scope="{ rawHtml: '<strong>Привет, мир!</strong>' }">
  <div v-html="rawHtml"></div>
</div>
<script src="https://unpkg.com/petite-vue?module" type="module"></script>
<script type="module">
  PetiteVue.createApp().mount();
</script>

В этом примере содержимое переменной rawHtml рендерится как HTML, и на странице появляется жирный текст Привет, мир!.

Отличие от стандартной привязки {{ }}

Стандартная интерполяция {{ rawHtml }} вставляет текст буквально, экранируя HTML-теги. В отличие от этого, v-html позволяет браузеру интерпретировать строку как HTML.

<div>{{ rawHtml }}</div>
<!-- Рендерится как текст: <strong>Привет, мир!</strong> -->

Использование v-html полезно при необходимости динамического формирования разметки на основе данных, полученных из API или других источников.

Безопасность при использовании v-html

Прямое использование v-html с пользовательскими данными может быть опасным из-за уязвимостей XSS. Любой HTML-код, переданный напрямую, будет вставлен в DOM, включая скрипты.

Рекомендуется:

  • Очистка данных перед вставкой. Использовать библиотеки для санитации HTML (например, DOMPurify).
  • Избегать прямой вставки пользовательского ввода без проверки.

Пример безопасной вставки:

<div id="app" v-scope="{ rawHtml: sanitize(userInput) }">
  <div v-html="rawHtml"></div>
</div>
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module';
  import DOMPurify from 'https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js';

  function sanitize(input) {
    return DOMPurify.sanitize(input);
  }

  createApp().mount();
</script>

Динамическое обновление HTML

v-html реагирует на изменение данных в объекте состояния. Любое обновление переменной автоматически перерисовывает HTML внутри элемента.

<div id="app" v-scope="{ content: '<p>Первый абзац</p>' }">
  <div v-html="content"></div>
  <button @click="content = '<p>Обновлённый абзац</p>'">Обновить</button>
</div>
<script type="module">
  PetiteVue.createApp().mount();
</script>

После нажатия кнопки <div> обновит содержимое, заменив первый абзац на новый.

Комбинация v-html с условной логикой

Можно использовать v-if, v-show или другие директивы Petite-Vue вместе с v-html. Например:

<div id="app" v-scope="{ htmlContent: '<em>Активно</em>', isActive: true }">
  <div v-if="isActive" v-html="htmlContent"></div>
</div>
<script type="module">
  PetiteVue.createApp().mount();
</script>

HTML вставится только если isActive истинно.

Ограничения и особенности

  • v-html перезаписывает внутренний HTML элемента, поэтому любые дочерние элементы, прописанные в разметке, будут удалены.
  • Директива не выполняет JavaScript внутри <script> тегов. Скрипты нужно подключать отдельными тегами <script> или через функции.
  • Динамически добавленные элементы с событиями через v-html не будут автоматически привязаны к слушателям Petite-Vue. Для этого нужно использовать v-on или программно добавлять обработчики.

Итоговое использование

v-html — мощный инструмент для вставки динамического HTML, который должен использоваться осторожно. Он идеально подходит для рендеринга заранее подготовленных шаблонов, содержимого из CMS или других безопасных источников. Обязательна проверка и санитация данных для предотвращения XSS-уязвимостей.

Оглавление