VUE渲染后端返回含有script标签的html字符串示例

 更新时间:2019年10月28日 10:50:26   作者:冷幽悠  
今天小编就为大家分享 一篇VUE渲染后端返回含有script标签的html字符串示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在接入支付宝支付模块的时候,支支返回的是一个form串,细看一下还有一个script标签,如何将其渲染出来给大家分享一下经验。注意点:不能在当前页面追加任何元素例如原生js:innerHtml、appendChiled等等;Vue原生v-html也不可以因为其只能渲染html标签,script不能够识别。

需要重新创建一个空白Vue组件,用router进行传参,传参方式(新窗口打开)

let routeData = this.$router.resolve({ path: 'Recharge', query: { htmls: resp.data.dataObj }});
window.open(routeData.href, '_blank');

解析方式

const div = document.createElement('div');
div.innerHTML = this.$route.query.htmls;
document.body.appendChild(div);
document.forms[0].submit();

(PS:评论区的兄弟给了个意见大家可以参考下:

要保证的是页面上存在一个已有的盒子 const data = await this.payOrder()

document.getElementById('pay').innerHTML = data;//此处form就是后台返回接收到的数据 document.forms[0].submit()
 

以上这篇VUE渲染后端返回含有script标签的html字符串示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈vue单页面中有多个echarts图表时的公用代码写法

    浅谈vue单页面中有多个echarts图表时的公用代码写法

    这篇文章主要介绍了浅谈vue单页面中有多个echarts图表时的公用代码写法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 在vue中根据光标的显示与消失实现下拉列表

    在vue中根据光标的显示与消失实现下拉列表

    这篇文章主要介绍了在vue中根据光标的显示与消失实现下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 解决vue项目中type=”file“ change事件只执行一次的问题

    解决vue项目中type=”file“ change事件只执行一次的问题

    这篇文章主要介绍了vue项目中解决type=”file“ change事件只执行一次的问题,本文给大家介绍的非常详细,需要的朋友可以参考下
    2018-05-05
  • vue+element树组件 实现树懒加载的过程详解

    vue+element树组件 实现树懒加载的过程详解

    这篇文章主要介绍了vue+element树组件 实现树懒加载的过程,本文通过图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 浅谈vue 多个变量同时赋相同值互相影响

    浅谈vue 多个变量同时赋相同值互相影响

    这篇文章主要介绍了浅谈vue 多个变量同时赋相同值互相影响,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue如何实现左右滑动tab(vue-touch)

    vue如何实现左右滑动tab(vue-touch)

    这篇文章主要介绍了vue如何实现左右滑动tab(vue-touch),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue Computed底层原理深入探究

    Vue Computed底层原理深入探究

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2022-08-08
  • 一文教你如何在Vue项目中使用Emoji表情

    一文教你如何在Vue项目中使用Emoji表情

    这篇文章主要为大家详细介绍了在vue项目中如何使用emoji表情,包括font-awesome图标,v-emoji-picker,vue-emoji等emoji表情库,需要的可以参考下
    2025-03-03
  • Vue实施重新发布和软件热更新的经验分享

    Vue实施重新发布和软件热更新的经验分享

    在Web应用的开发周期中,版本管理和软件热更新是一个不可或缺的话题,随着Vue.js框架的流行,越来越多的应用程序选择使用Vue来构建前端,本文将探讨在Vue应用中实施重新发布和热更新的最佳实践,需要的朋友可以参考下
    2024-09-09
  • 深入剖析vite到底是快还是慢原理详解

    深入剖析vite到底是快还是慢原理详解

    这篇文章主要为大家介绍了深入剖析vite到底是快还是慢原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论