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>