如何使用 Vue.js 设置文本节点的样式？

Question

<div id='app'>{{ userContent }}</div>

在userContent 中，如果一行以- 开头，我只想将该行设置为红色。我可以使用这些行的类修改 js 中的 userContent 数据并使用 v-html 但随后我失去了 XSS 保护。有什么方法可以使用 Vue.js 进行 XSS 保护，同时还可以设置 userContent 的样式？

Answer 1

如果不从用户提供的字符串创建新元素，我认为这是不可能的。

您可以使用正则表达式自己解析字符串以匹配以连字符开头的行，例如 (?<=\-)(.*?)(?=\n) 或 \-(.*?)\n，将该内容包装在具有类的新元素中，然后设置样式，但是您然后需要将其注入到 html 中，我相信这会打开 XSS，就像使用 v-html 一样。

据我所知，经过快速搜索后，似乎没有任何方法可以纯粹使用 CSS 来做到这一点。