Существует распространенная проблема при работе с 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 и стараться минимизировать его использование.
Добавить комментарий