如何转义vuejs中的内容？

Question

我正在为我的 vuejs 项目（vuejs：版本 2）使用 webpack 模板。我想知道如何转义我的内容（v-html 以外的方式）：

请注意 message 包含一些 <a> 标签，例如：These is my website <a href="https://google.com">link</a>.

就像车把一样，我想使用类似的东西：

<p>{{{ message }}}</p> 和 <p>{{{ message | customFilter }}}</p>。

我已经尝试了第一个选项，但它不起作用。有什么方法可以让它与三胡子一起使用吗？

Answer 1

根据docs：

In order to output real HTML, you will need to use the v-html directive

所以听起来你不能用小胡子语法来做。

如果您想 combine filters with directive bindings，请使用计算属性。

Answer 2

我知道这不是 OP 想要的，但对于 Google 员工来说：

<span v-html="`{{ hey }}`"></span>

Answer 3

我尽量避免使用 v-html（出于安全原因）。在这种情况下，您可以使用 CSS 和 content 属性，检查此示例：

span.open:before {
  content: '{{';
  margin-right: 0.5rem;
}
span.close:after {
  content: '}}';
  margin-left: 0.5rem;
}

<span class="open"></span>hey<span class="close"></span>

How to escape content in vuejs?