Разница между v-html и v-text в Vue.js

Директивы Vue.js, v-html и v-text, используются для установки содержимого элемента. Они оба служат целевой цели, но функционируют немного по-разному, что и формирует их различия.

v-text устанавливает значение 'textContent' элемента. Проще говоря, он помещает текст в элемент и не будет интерпретировать содержимое как HTML. Это похоже на прямую операцию JavaScript, где вы устанавливаете 'textContent' элемента. Это сделает этот способ хорошим выбором, когда вы хотите отобразить обычный текст.

Например:

<span v-text="'Привет, мир!'"></span> 

Вышеуказанный код будет отображаться как 'Привет, мир!'.

v-html, с другой стороны, устанавливает значение 'innerHTML' элемента. Он ожидает строку с HTML-кодом и добавляет ее в элемент как таковой. Иными словами, v-html интерпретирует содержащийся HTML.

Например:

<span v-html="'<strong>Привет, мир!</strong>'"></span>

Вышеуказанный код будет отображаться как жирный текст 'Привет, мир!'.

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

В итоге, оба утверждения в вопросе верны. v-text устанавливает textContent элемента, в то время как v-html устанавливает innerHTML элемента. Правильный выбор между ними зависит от типа содержимого, которое вы хотите вставить: простой текст или HTML-код.