美文网首页
vue----数据转义,直接用v-html实现不了,filter

vue----数据转义,直接用v-html实现不了,filter

作者: 默色留恋 | 来源:发表于2020-07-21 11:02 被阅读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(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/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(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
    }
}
 //页面中显示
详情请点击 [http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml](http://www.nhfpc.gov.cn/jcj/s3577/201409/adbc8b5741bf4b9c86c8e6666d64171e.shtml)

相关文章

  • vue----数据转义,直接用v-html实现不了,filter

    之前遇到一个项目,后台返回的数据是如下 但是需要在前台的页面显示转义后的 用过v-html和filters过滤,但...

  • 0x7e相关转义

    PPP数据成帧转义,C语言实现 PPP数据成帧转义,JAVA语言实现 串口数据成帧转义,C语言实现 串口数据成帧转...

  • Vue

    第一章:常用的模板指令v-text:显示数据 v-html:不经过转义显示html代码 v-model:数据双向绑...

  • 转义Filter

    使用Decorator模式包装request对象实现html标签转义功能编写一个html转义过滤器。 web.xm...

  • Python xml 2020-10-13

    可以用xml库,也可以用lxml。如果数据比较大,或者有转义字符,不能直接用。 lxml的迭代解析在解析超大数据集...

  • html中转义字符(适用于markdown )

    html中转义字符(适用于markdown ) 一般用‘\’能够实现转义,特殊情况下可以用下列字符实现。

  • 如何在网页中显示<>

    用正则进行转义 < 改为 <> 改为 >写个正则自行转义即可或者直接使用这种在线转义工具https:/...

  • Go常见架构模式的实现

    实现pipe-filter framework Pipe-Filter 模式: ⾮常适合与数据处理及数据分析系统 ...

  • Vue:filter、方法、computed和watch的自我理

    最近一直在用,感觉有些 data,用filter可以,用自定义方法也行。有些数据呢,用computed能实现,用w...

  • SpringMVC 对接口拦截的三种方法

    过滤器(Filter) 自定义Filter需要实现了javax.servlet的Filter接口。可以直接在类上加...

网友评论

      本文标题:vue----数据转义,直接用v-html实现不了,filter

      本文链接:https://www.haomeiwen.com/subject/hetikktx.html