VUE使用v-html解析失败和解决方案

有些时候我们拿到后端返回内容进行v-html解析的时候,会发现解析之后,页面展示的还是html内容,我分析了我遇到的情况,希望能帮到大家。

 原因:是因为后端返回数据的时候没有对内容进行html做转义,导致页面输出了HTML的代码。

解决方法:

我们自己封装一个方法将传入的内容先进行转换,然后在初始化或者需要展示数据的时候对里面的数据内容进行覆盖操作。

例如:

 

其中的toHtml就是转换方法,我贴在下面,大家粘贴使用即可!

			//转换htmltoHtml(str) {var arrEntities = {'lt': '<','gt': '>','nbsp': ' ','amp': '&','quot': '"'};return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all, t) {return arrEntities[t];});},

最后希望能帮到大家,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/441.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javaee 使用监听器统计当前在线用户列表

ServletContextListener 和 HttpSessionBindingListener 需要配和使用 TestServletContextListener package com.yyy.listener;import java.util.ArrayList; import java.util.List;import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import …

手术麻醉临床信息系统源码:实现手术全流程自动化和信息化

手术麻醉临床信息系统遵循“以病人为中心、服务于临床”的宗旨&#xff0c;使医护人员从繁琐的病历书写中解放出来&#xff0c;集中精力关注病人的诊疗&#xff0c;将更多的时间用于分析、诊断。以服务围术期临床业务工作的开展为核心&#xff0c;为医护人员、业务管理人员、院…

SpringBoot 使用 MockMvc 进行 Web 集成测试

SpringBoot 使用 MockMvc 进行 Web 集成测试 在 SpringBoot 应用程序中&#xff0c;我们可以使用 MockMvc 进行 Web 集成测试。MockMvc 是一个测试框架&#xff0c;可以模拟 HTTP 请求和响应&#xff0c;并且可以使用 Spring MVC 的控制器进行测试。MockMvc 可以让我们测试 Sp…

【总结】网页状态码——200正常、302重定向、304客户端有缓存、400浏览器请求传参异常、404未找到、405方法不允许、500服务器异常

目录 200正常500异常--服务器异常Java代码400异常----传参相关的异常get方法长度限制400异常&#xff0c;加了RequestParam(value "name") 必须传值400异常&#xff0c;后端类型是Integer&#xff0c;前端传的是string&#xff0c;转换失败400异常&#xff0c;日期格…

2-css-1

一 CSS 初体验 CSS 定义&#xff1a;层叠样式表 (Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;&#xff0c;是一种样式表语言&#xff0c;用来描述HTML文档的呈现&#xff08;美化内容&#xff09; CSS 书写在什么位置&#xff1f; title 标签下方哪个标签里面…

常见的锁策略CAS

目录 一、乐观锁&悲观锁 1.1、悲观锁 1.2、乐观锁 二、重量级锁&轻量级锁 2.1、轻量级锁 2.2、重量级锁 三、自旋锁&挂机等待锁 3.1、自旋锁 3.2、挂起等待锁 四、读写锁&普通互斥锁 4.1、读写锁 4.2、互斥锁 五、公平锁&非公平锁 六、可…

基于WebAssembly构建Web端音视频通话引擎

Web技术在发展&#xff0c;音视频通话需求在演进&#xff0c;怎么去实现新的Web技术点在实际应用中的值&#xff0c;以及给我们带来更大的收益是需要我们去探索和实践的。LiveVideoStackCon 2022北京站邀请到田建华为我们从实践中来介绍WebAssembly、WebCodecs、WebTransport等…

Spring 事务的相关配置、传播行为、隔离级别及注解配置声明式事务

目录 一、事务的相关配置 1. 添加测试标签 2. 添加对应方法 3. 测试 二、事务的传播行为 三、事务的隔离级别 四、注解配置声明式事务 1. 注册事务注解驱动 2. 加上注解 3. 配置类代替xml文件中的注解事务支持 4. 测试 往期专栏&文章相关导读 1. Maven系列专栏…

css基础(三)

目录 一、CSS三大特性 1.层叠性 2.继承性 3.行高的继承 4.CSS三大特性之优先级 5.优先级注意的问题 6.CSS权重的叠加 二、盒子模型 1.盒子模型组成部分 2.盒子模型边框border 3.边框的复合写法 4.表格细线边框 5.边框会影响盒子实际大小 6.盒子模型内边距padding 7.盒子模型外边…

java并发编程 4:线程的暂停唤醒 wait/notify与park/unpark

目录 wait & notifywait notify 原理常用APIsleep(long n)和wait(long n)的区别wait notify的使用套路同步模式之保护性暂停实现带超时版多任务版 生产者/消费者模式 park & unpark基本使用原理 wait & notify wait notify 原理 假设一个线程&#xff0c;在获取锁…

【观察】新华三:数据中心可组合架构创新,提供多元算力的“最优解”

今天&#xff0c;以ChatGPT为代表的AIGC大模型&#xff0c;已经在国内形成了“海啸效应”&#xff0c;几乎所有的科技公司都在想方设法进入大模型的赛道。背后的核心驱动力&#xff0c;就在于大模型的最大价值在于普遍提升个人生产力&#xff0c;而各行各业的公司都在积极寻找应…

Ubuntu离线安装Telnet服务

通过ssh上传telnet包&#xff0c;下载地址&#xff1a;telnet-0.17-41.2build1-amd64资源-CSDN文库 解压telnet包&#xff1a; tar -xzvf telnet_0.17-41.2build1_amd64.tar.gz 安装telnet服务&#xff1a; dpkg -i telnet_0.17-41.2build1_amd64.deb 安装完毕&#xff0c;测…