Как вывести html код в template Vue

Иногда могут быть ситуации, что на уровне данных у нас храниться не какой-то текст, а там храниться html-разметка.

Например, к нам от внешнего api пришли какие-то данные и эти данные представляют собой html-разметку, которая должна быть вставлена в наш html-документ. 

Например, на уровне данных есть переменная text, которая содержит html-разметку.

data() {

    return {

      text: '<h1>Заголовок</h1><p>Абзац</p>'

}

  },

Давайте попробуем вставить эту разметку в наш template.

{{ text }}

Vue выведет это не как html разметку, а как обычный текст.

Директива v-html

Давайте разберемся как заставить Vue воспринимать это не как обычный текст, а как html-разметку и, соответственно, отображать, рендерить ее на веб-странице.

Для этого во Vue есть специальная директива, которая называется v-html. 

<div v-html="text"></div>

В качестве его значения указываем переменную на уровне данных, значение, которой нужно вывести.

Теперь на странице это отобразиться как html-разметка.

v-html должен прикрепиться к какому-то реальному элементу DOM-разметки. Использовать его на элементе template не получиться. 

Вот такая полезная директива, которая позволяет нам во Vue отображать html-разметку не как текст, а рендерить ее на веб-странице.