时间戳

首页 > 解决方案 > 如何使用 Vue.js 设置文本节点的样式？

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

问题描述

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

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

标签： javascriptvue.jsvuejs2

解决方案

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

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

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

推荐阅读