搜索
简帛阁>技术文章>Vue使用v-html展示后端返回的html内容

Vue使用v-html展示后端返回的html内容

使用v-html展示后端返回的html内容,并解决js不执行问题

在UI平台开发的过程中,因为测试报告是在后台生成的,需要将测试报告整个进行返回到前端进行展示,但是vue不能像原生html一样直接展示render返回的响应页面,所以笔者借助v-html进行展示。具体写法如下:

<div ref="reportHTML" v-html="htmlText" class="web-con"></div>

<script>
	data(){<!-- -->
		return{<!-- -->
			htmlText: ""
		}
	}
	methods:{<!-- -->
		lookReport(report_case){<!-- -->
    		...
            this.htmlText = response.data
            ...
    },
	}
</script>
  • 这种方式能够将测试报告页面正常展示出来,但是页面上的按钮全部都点不动,后面发现这种方式只支持html渲染,而js脚本内容则未被执行。所以还要解决js脚本无法被渲染的问题。后面参考了下面这篇文章,发现可以动态的将js脚本插入到标签中,这样子就解决了v-html中js脚本不生效的问题。
    https://blog.csdn.net/qq_38387487/article/details/88017215
    具体用法如下:
// 使用正则获取js内容
   response.data.replace(/<script.*?>([\s\S]+?)<\/script>/img,function(_,js){<!-- -->    //正则匹配出script中的内容
    	JSScript = js
   })
   // 这里需要使用$nextTick  需要等dom更新后才能操作reportHTML
   this.$nextTick(() => {<!-- -->
	   // 将js脚本内容插入到标签当中
	    var newElement = document.createElement("script")
	    newElement.innerHTML = JSScript
	    this.$refs.reportHTML.append(newElement)
  })
使用vhtml展示后端返回html内容,并解决js不执行问题在UI平台开发过程中,因为测试报告是在后台生成,需要将测试报告整个进行返回到前端进行展示,但是vue不能像原生html一样直接展示re
很简单哦~~~~~~~用iframe标签即可实现第一步:添加iframe标签代码<iframe:srcthisurlclasshtmlShowframeborder0width100%heigh
html用法和vtext相似但是他可以将HTML片段填充到标签中可能有安全问题,一般只在可信任内容使用vhtml,永不用在用户提交内容上它与vtext区别在于vtext输出是纯文本,浏览器不会
在接入支付宝支付模块时候,支支返回是一个form串,细看一下还有一个script标签,如何将其渲染出来给大家分享一下经验。注意点:不能在当前页面追加任何元素例如原生js:innerHtml、ap
Vue语法中,通过{{}}可以输出文本变量,当时它并不能实现在一个标签语句加入一个新标签语句,这时候需要用到vhtml属性来完成操作<!DOCTYPEhtml><htmllan
废话少说,代码如下所述:Vue实例中的数据,事件和方法newVue({el:root,data:{msg:world,number:123}})显示123Vue实例中的数据,事件和方法newVue({
vhtml如果在HTML代码中想嵌入一个代码块,代码块中有一些标签能够按照HTML语法解读出来,就需要vhtml来实现了,例如下面代码:HTML<!DOCTYPEhtml><ht
黑马vue810、vcloak、vtext、vhtml、vbind、von基本使用一、总结一句话总结:vbind等这些东西都是用vuedata里面变量1、使用vcloak能够解决插值表达式闪烁
废话少说,代码如下所述:<!DOCTYPEhtml><htmllang"en"><head><metacharset"UTF8"><title&g
npminstallvueprintnbsave1、安装npminstallvueprintnbsave2、在mainjs文件中引入importPrintfromvueprintnbVueuse(Pr