Отображать необработанный html в атрибуте v-html
Я обнаружил проблему с рендерингом html из кода vue. Мне нужно сгенерировать диапазон из vue с необработанным html внутри
<table>
<tr>
<td style = "width:33%" v-html = "diffText"></td>
</tr>
</table>
this.diff.forEach((part) => {
let color = part.added ? 'green' :
part.removed ? 'red' : 'grey';
this.diffText += "<span style='color:" + color + "'>" + part.value + "</span>";
});
part.value является необработанным html.
@ Даниэль, поскольку ОП пометил перенос в <xmp> как принятый ответ, они, вероятно, не хотят, чтобы разметка интерпретировалась. Это означает, что любые будущие пользователи могут подумать, что это приемлемое решение. Поэтому я добавил перспективное решение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
<table>
<tr>
<td style = "width:33%">
<pre v-for = "(d, key) in diff"
:key = "key"
:style = "{ color: getColor(d) }"
v-html = "d.value" />
</td>
</tr>
</table>
...
methods: {
getColor(d) {
return d.added ? 'green' : d.removed ? 'red': 'grey'
}
}
...
...вероятно, даст результат, который вы ищете. Поскольку содержимое тега <pre> не интерпретируется как HTML, здесь также можно использовать v-text вместо v-html.
Примечание. В отличие от <xmp>, теги <pre> не устарели, и их реализация в браузерах одинакова.
this.diff.forEach((part) => { let color = part.added? 'green': part.removed? 'red': 'grey'; this.diffText += "<span style='color:" + цвет + "'>" + часть.значение + "</span>";});
Вы можете использовать теги <xmp>.
<xmp>
<div> I am a Div</div>
</xmp>
это отобразит <div> I am a Div</div>.
Другие способы сделать это:
1. Замените некоторые специальные символы из исходной строки html:
- Замените символ
&на& - Замените символ
<на< - Замените символ
>на>
<pre>. Официальная документация: HTML-документы не должны содержать элементы XMP или LISTING.
заменить специальные символы - лучшее решение для меня.
Я обнаружил, что лучшим решением является замена всех "<" на "<" и ">" на ">"
Вы говорите, что хотите, чтобы на выходе отображался необработанный HTML? или что у вас есть видимый необработанный html, который вы хотите отобразить html? Если это первый, используйте
v-textвместоv-html. Если это второй, используйте фреймворк для того, в чем он хорош; вместо того, чтобы зацикливаться в javascript и вставлять результирующую строку html в одну переменную, поместите циклv-forв шаблон и управляйте html оттуда.