vue----数据转义,直接用v-html实现不了,filter
2020-07-21 本文已影响0人
默色留恋
之前遇到一个项目,后台返回的数据是如下
"详情请点击 <a href="http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml" target="_blank">http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml</a>"
但是需要在前台的页面显示转义后的
用过v-html和filters过滤,但是都不可以
<div v-html="contentData.content"></div>
<div>{{contentData.content|unEscapeHTML}}</div>
filters: {
unEscapeHTML:function (html) {
html = "" + html;
return html.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, '"').replace(/'/g, "'");
}
},
//都会显示成
详情请点击 <a href="http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml" target="_blank">http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml</a>
想到的解决办法就是在v-html里面调用方法,在方法中进行一次转义
<div v-html="unEscapeHTML(contentData.content)"></div>
methods:{
unEscapeHTML(html) {
html= "" +html;
return html.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, '"').replace(/'/g, "'");
}
}
//页面中显示
详情请点击 [http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml](http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml)