假设我有一个段落,其中包含从某个数据库获取的一些文本:
<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 代码显示在页面上。
有没有办法阻止字符被转义,或者甚至有另一种方法可以将文本中间的[引用]转换为另一个页面的工作链接?
如果您不希望 HTML 被转义,请使用v-html https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML指示。
来自文档:
双胡子将数据解释为纯文本,而不是 HTML。在
为了输出真正的 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/[email protected] /cdn-cgi/l/email-protection/dist/vue.min.js"></script>
<div id="app">
<p>{{text}}</p>
<p v-html="text"></p>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)