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>

我尝试在脚本中使用替换功能，如下所示：

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>