当前位置:   article > 正文

VUE使用v-html解析失败和解决方案_v-html不生效

v-html不生效

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

48857cd75a7e4981962f52579c2a14ca.jpg

 

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

解决方法:

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

例如:

34d5789efa6e42e7b7666c13f4ef49b1.png

 

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

  1. //转换html
  2. toHtml(str) {
  3. var arrEntities = {
  4. 'lt': '<',
  5. 'gt': '>',
  6. 'nbsp': ' ',
  7. 'amp': '&',
  8. 'quot': '"'
  9. };
  10. return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,
  11. function(all, t) {
  12. return arrEntities[t];
  13. });
  14. },

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

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/778009
推荐阅读
相关标签
  

闽ICP备14008679号