Question

假设我有一个带有一些文本的段落，我从某个数据库中获取：

<p> 
    {{ text }}
</p>

但是，此文本可能包含对我的应用程序中其他页面的一些引用：

Sample text [reference] sample text

所以我希望这些引用变成指向所述页面的链接：

<p>
    Sample text <a href="/path/to/reference"> reference </a> sample text
</p>

我尝试在脚本中使用replace函数，如下所示：

text.replace(/\[(.+)\]/,"<a href='/path/to/$1'>$1</a>");

但是所有字符都被转义，导致主页html代码显示在页面上。

有没有办法阻止字符被转义，或者甚至是另一种方法将文本中间的[引用]转换为另一个页面的工作链接？

Answer 1

如果您不希望转义HTML，请使用v-html指令。

来自文档：

双胡须将数据解释为纯文本，而不是HTML。在为了输出真实的HTML，您需要使用v-html指令：

示例：

＆＃13;

var app = new Vue({
  el: "#app",
  data: function() {
    return {
      text: "See defect <a href='#'>#12345</a> for details"
    };
  }
});

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
  <p>{{text}}</p>
  <p v-html="text"></p>
</div>

＆＃13;