Отображение неэкранированного HTML в Vue.js

Существует распространенная проблема при работе с Vue.js, когда необходимо отобразить HTML-код внутри привязки mustache ({{}}). Например, часто требуется вставить перенос строки <br /> непосредственно в данные, которые затем будут отображены на веб-странице. Однако, при обычном использовании mustache привязок, HTML-код будет автоматически экранирован, то есть отображен как текст, а не как часть разметки.

Пример кода:

<div id="app">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет, мир!<br />Как дела?'
  }
})

В данном случае, вместо переноса строки, пользователь увидит текст «
«.

Чтобы решить эту проблему, можно использовать директиву v-html вместо обычной mustache привязки. Директива v-html предназначена для вывода HTML-кода и автоматически отключает его экранирование.

Пример с использованием v-html:

<div id="app">
  <p v-html="message"></p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет, мир!<br />Как дела?'
  }
})

Теперь вместо текста «
» будет корректно отображен перенос строки.

Важно помнить, что использование v-html для вывода произвольного HTML-кода может создать потенциальные уязвимости для атак типа XSS, если этот HTML-код получен из ненадежного источника. Поэтому всегда следует быть осторожным при работе с v-html и стараться минимизировать его использование.

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее