javascript - Vue.js/JavaScript - 是否可以在文本中插入链接/ anchor ？

Question

假设我有一个段落，其中包含从某个数据库中获取的一些文本:

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

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

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>");

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

有没有办法阻止字符被转义，或者甚至有其他方法将文本中间的 [references] 变成指向另一个页面的工作链接？

Answer 1

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

来自文档:

The double mustaches interprets the data as plain text, not HTML. Inorder to output real HTML, you will need to use the v-html directive:

例子:

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>