如何在 vuejs 中转义内容？答案

【问题标题】：How to escape content in vuejs?如何在 vuejs 中转义内容？
【发布时间】：2016-10-05 16:14:23
【问题描述】：

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

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

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

{{{ message }}} 和 {{{ message | customFilter }}}。

我尝试了第一个选项，但它不起作用。有没有办法让它与三重胡须一起使用？

【问题讨论】：

【解决方案1】：

我知道这不是 OP 想要的，而是 Google 员工想要的：

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

【讨论】：

【解决方案2】：

根据docs：

为了输出真正的 HTML，你需要使用 v-html 指令

所以听起来你不能用 mustache 语法来做到这一点。

【讨论】：

【解决方案3】：

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

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

&lt;span class="open"&gt;&lt;/span&gt;hey&lt;span class="close"&gt;&lt;/span&gt;

【讨论】：