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

Перейти в телеграм, чтобы получить результаты теста
Пройдите тест, узнайте какой профессии подходите
Вам подходит профессия:
Аналитик данных
Основные характеристики профессии:
не нужно общаться с людьми
логика
анализ
поиск закономерностей
работа с числами
Построим личный план перехода в профессию для вас бесплатно
- убедитесь, подходит вам профессия или нет
- получите оценку своих навыков и шансов освоить профессию
- забронируем за вами скидку 55% на обучение, пока думаете
Позвоним вам в течение часа — не пропустите звонок
Чем занимается специалист
Специалист создает все онлайн-продукты, программы, приложения, игры и сайты, которыми вы пользуетесь каждый день.
Создает — значит описывает последовательность действий на специальном языке программирования. Настраивает действия, что должно произойти, если пользователь нажмет на кнопку.
Средняя зарплата начинающего специалиста в первый год работы:
от 50 000 ₽
Что надо знать и уметь, чтобы выучиться на аналитика:
- базовое школьное образование
- уверенные навыки работы с компьютером
- опыт выполнения задач в конкретные сроки
Глубокие знания математики или английского не нужны
Почему мы рекомендуем вам эту профессию
Ваш скрытый талант:
наблюдательность
Существует распространенная проблема при работе с Vue.js, когда необходимо отобразить HTML-код внутри привязки mustache ({{}}). Например, часто требуется вставить
Существует распространенная проблема при работе с 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
и стараться минимизировать его использование.
Добавить комментарий