Рендеринг необработанного HTML в ваших приложениях Vue

Хотя это случается не так часто, иногда на самом деле есть веская причина для вставки необработанного HTML, хранящегося в виде строк, в DOM. Очень редко, конечно. В большинстве случаев вам никогда не следует этого делать, так как это делает вас уязвимыми для различных XSS-атак. В некоторой степени допустимым вариантом использования может быть, если вы пишете новый интерфейсный компонент для древней устаревшей системы, которая (содрогается) хранит HTML, смешанный с данными, в устаревшей базе данных на давно забытом сервере. комнату в каком-то арендованном помещении на севере штата. В этом случае вам, возможно, придется прибегнуть к рендерингу необработанного HTML в вашем приложении.

Итак, давайте начнем. Перво-наперво, проявите свои навыки работы с RegEx…

Просто шучу. Я бы предпочел не рисковать судьбой известной вселенной только для того, чтобы приспособиться к устаревшей системе.

Так или иначе, получается, что Vue предоставляет нам миленькую директиву, которая может справиться со всем этим за нас. Как и ожидалось, он называется v-html.

Чтобы использовать его, передайте ссылку на строку HTML в вашей модели данных в v-html в шаблоне вашего компонента, например:

<template>
  <div v-html="legacySystemHTML">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Just like JSX! Oh wait...
      legacySystemHTML: `
        <FONT color="#faddad" size="-2">
          <MARQUEE>Please enter your name to continue.</MARQUEE>
          ...
        </FONT>
      `
    }
  }
}
</script>

И точно так же ваш HTML будет отображаться в компоненте. Если вы обновите свойство legacySystemHTML, HTML-код будет соответствующим образом обновлен.

Неплохо!

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

…

Понятия не имею, зачем вам это, если вместо этого можно было бы просто использовать выражения Mustache ({{ componentInnerText }}), но оно есть!