[英]Vue.js/JavaScript - Is it possible to insert a link/anchor inside a text?
Let's say I have a paragraph with some text that I get from some database:假设我有一个段落,其中包含从某个数据库中获取的一些文本:
<p>
{{ text }}
</p>
However, this text may contain some references to other pages in my aplication:但是,此文本可能包含对我的应用程序中其他页面的一些引用:
Sample text [reference] sample text
So I would like these references to get turned into links to said pages:所以我希望这些参考资料变成指向上述页面的链接:
<p>
Sample text <a href="/path/to/reference"> reference </a> sample text
</p>
I tried using the replace function in the script like this:我尝试在脚本中使用替换功能,如下所示:
text.replace(/\[(.+)\]/,"<a href='/path/to/$1'>$1</a>");
But the characters all get escaped resulting in the anchor html code getting shown on the page.但是这些字符都被转义了,导致页面上显示了锚 html 代码。
Is there a way to stop the characters from being escaped, or even another way to turn [references] in the middle of the text into working links to another page?有没有办法阻止字符被转义,甚至还有另一种方法可以将文本中间的 [references] 转换为指向另一个页面的工作链接?
If you don't want your HTML to be escaped, use the v-html
directive.如果您不希望 HTML 被转义,请使用
v-html
指令。
From the docs:从文档:
The double mustaches interprets the data as plain text, not HTML.
双胡须将数据解释为纯文本,而不是 HTML。 In order to output real HTML, you will need to use the
v-html
directive:为了输出真正的 HTML,您需要使用
v-html
指令:
Example:例子:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.