Vue.js / JavaScript-是否可以在文本内插入链接/锚点？

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代码显示在页面上。

有没有一种方法可以阻止字符转义，或者还有另一种方法可以将文本中间的[references]转换为指向另一页的有效链接？

Answer 1

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

从文档：

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

例：

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

<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>