vue.js/javaScript-是否可以在文本中插入链接/锚点

Question

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

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

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

Sample text [reference] sample text

所以我希望这些参考文献转变为上述页面的链接：

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

我尝试在这样的脚本中使用替换函数：

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

但所有字符都被逃脱，导致锚点HTML代码在页面上显示。

是否有一种方法可以阻止字符被逃脱，甚至可以阻止字符在文本中间转动[引用]到另一页的工作链接？

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>