前端渲染后端返回的HTML格式的数据

在日常开发中,经常有需要前端渲染后端返回页面的需求,对于不同数据结构,前端的渲染方式也不尽相同,本文旨在对各种情况进行总结。

后端返回纯html文件格式

数据包含html标签等元素,数据类型如下图:
在这里插入图片描述
在这里插入图片描述

前端通过 js 方式处理
// 必须要存进localstorage,否则会报错,显示不完全
window.localStorage.removeItem('callbackHTML')
window.localStorage.setItem('callbackHTML', res.data.htmlStr)
// 读取本地保存的html数据,使用新窗口打开
var newWin = window.open('', '_blank')    
// 读取本地保存的html数据,使用当前窗口打开
// var newWin = window.open('', '_self')   
newWin.document.write(localStorage.getItem('callbackHTML'))
// 关闭输出流
newWin.document.close()

后端返回一个html文件网址

前端需要渲染网址中的页面,可通过iframe实现:

<iframe :src="res.data.htmlStr" frameborder="0" width="100%" :style="{height: '100%'}" scrolling="auto"></iframe>

后端返回一个html文本字符串

数据包含部分标签,例如下图等等;
str = '<div><span style="color: red;">{{title}}</span></div>'在这里插入图片描述

通过vue指令来渲染

v-html 是用于向所在的标签中渲染文本内容,可以解析标签。

<div v-html='res.data.htmlStr'></div>

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

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

相关文章

“编辑微信小程序与后台数据交互与微信小程序wxs的使用“

引言 在现代移动应用开发中&#xff0c;微信小程序已经成为了一个非常流行和广泛使用的平台。为了使小程序能够展示丰富的内容和实现复杂的功能&#xff0c;与后台数据的交互是至关重要的。同时&#xff0c;微信小程序还提供了一种特殊的脚本语言——wxs&#xff0c;用于增强小…

图论03-【无权无向】-图的深度优先遍历-路径问题/检测环/二分图

文章目录 1. 代码仓库2. 单源路径2.1 思路2.2 主要代码 3. 所有点对路径3.1 思路3.2 主要代码 4. 路径问题的优化-提前结束递归4.1 思路4.2 主要代码 5. 检测环5.1 思路5.2 主要代码 6. 二分图6.1 思路6.2 主要代码6.2.1 遍历每个联通分量6.2.2 递归判断相邻两点的颜色是否一致…

【手写数据库toadb】语言解析器,编程语言是这样被解析理解,解析器利器flex和bison,解析树与逆波兰式

flex与bsion使用介绍 ​专栏内容: 手写数据库toadb 本专栏主要介绍如何从零开发,开发的步骤,以及开发过程中的涉及的原理,遇到的问题等,让大家能跟上并且可以一起开发,让每个需要的人成为参与者。 本专栏会定期更新,对应的代码也会定期更新,每个阶段的代码会打上tag,方…

安装插件失败,getaddrinfo ENOENT raw.githubusercontent.com 报错

报错如图 解决方法&#xff1a; 查看raw.githubusercontent.com的真实IP地址 点开网址 https://www.ipaddress.com/ &#xff0c;输入raw.githubusercontent.com&#xff0c;点击查询&#xff1a; 复制以下的ip 修改hosts文件 找到这个文件夹&#xff1a; C:\Windows\System32\…

MIPS指令集摘要

目录 MIPS指令R I J三种格式 MIPS五种寻址方式 立即数寻址 寄存器寻址 基址寻址 PC相对寻址 伪直接寻址 WinMIPS64汇编指令 助记 从内存中加载数据 lb lbu lh lhu lw lwu ld l.d lui 存储数据到内存 sb sh sw sd s.d 算术运算 daddi daddui dadd…

Java中静态常量和枚举类的区别

在项目中我们有时候会使用常量、静态常量以及枚举&#xff0c;那么他们有什么区别呢&#xff1f;我们先看几个例子&#xff1a; 若依框架中使用的常量&#xff1a; /** 正常状态 */public static final String NORMAL "0";/** 异常状态 */public static final Stri…

绿盾控制台如何给未授权终端分配相应权限

环境&#xff1a; 绿盾控制台7.0 问题描述&#xff1a; 绿盾控制台如何给未授权终端分配相应权限 解决方案&#xff1a; 1.进入桌面管理系统 2.通过终端号&#xff0c;找到未授权终端下面&#xff0c;选择相应的未授权终端 3.点击鼠标右键&#xff0c;选择分配授权模块 4.下…

01认识微服务

一、微服务架构演变 1.单体架构 将所有的功能集中在一个项目开发&#xff0c;打成一个包部署。优点架构简单&#xff0c;部署成本低。缺点耦合度高&#xff0c;不利于大型项目的开发和维护 2.分布式架构 根据业务功能对系统进行拆分&#xff0c;每个业务模块作为独立的项目…

修改ConsoleApplication17_2项目实现oss上线

首先创建号oss&#xff0c;上传文件&#xff0c;复制临时链接 木马内写 可以看到能成功上线但是有个问题就是占用cpu大小为9%左右&#xff0c;这里我用的是腾讯云oss实现的&#xff0c;用阿里云oss实现也是9%左右 我再次进行url的aes加密 还是百分之9左右&#xff0c; 这里…

npm publish发布到在线仓库时,提示:Scope not found

当npm publish发布时&#xff0c;控制台提示&#xff1a;Scope not found&#xff0c;具体错误信息如下&#xff1a; npm notice npm ERR! code E404 npm ERR! 404 Not Found - PUT https://registry.npmjs.org/xxx%2fxxx - Scope not found npm ERR! 404 npm ERR! 404 xxx/xx…

Spring源码解析——事务的回滚和提交

正文 上一篇文章讲解了获取事务&#xff0c;并且通过获取的connection设置只读、隔离级别等&#xff0c;这篇文章讲解剩下的事务的回滚和提交。最全面的Java面试网站 回滚处理 之前已经完成了目标方法运行前的事务准备工作&#xff0c;而这些准备工作最大的目的无非是对于程…

[计算机提升] 快捷方式与硬链接

1.7 快捷方式与硬链接 1.7.1 快捷方式(符号链接) 在Windows系统中&#xff0c;快捷方式是指一个特殊的文件或图标&#xff0c;它提供了方便的访问其他文件、文件夹、应用程序或网站的方式。快捷方式可以视为一个指向其他位置的链接或引用。 快捷方式被创建时&#xff0c;会关…

Rust 中的String与所有权机制

文章目录 一、string二、所有权2.1 所有权与作用域2.2 对所有权的操作2.2.1 转移2.2.3 拷贝2.2.3 传递 2.3 引用2.3.1 借用2.3.2 可变引用 一、string 之前学习过 Rust 只有几种基础的数据类型&#xff0c;但是没有常用的字符串也就是String&#xff0c;今天来学习一下 String…

【单元测试】--单元测试最佳实践

一、单元测试代码风格 编写单元测试代码时&#xff0c;遵循一致的风格和最佳实践是非常重要的&#xff0c;因为它有助于提高代码的可读性、可维护性和可靠性。以下是一些常见的单元测试代码风格和最佳实践&#xff1a; 命名约定&#xff1a; 测试方法的名称应当清晰、描述性&…

C++初阶(五)类和对象

文章目录 一、C两大类型二、类的6个默认成员函数三、构造函数1、概念2、特性1、构造函数自动调用特性演示2、无参有参调用两种情况演示3、函数重载演示4、默认构造函数组成及演示5、内置类型成员不初始化的补丁演示 3、析构函数1、概念2、特性1、代码演示2、析构两种情况 4、构…

使用vscode调试ffmpeg源码

ffmpeg的编译配置 # --enable-debug 设置为调试级别 # --disable-stripping 如果不加此选项&#xff0c;会strip去掉符号信息 ./configure --prefix{output_path} --enable-debug --disable-stripping make -j10VSCode的配置 将以下文件对比替换工程.vscode目录下的相同文件 …

vsCode git 修改、清空、重置、保存账号名密码

1、保存账号名密码&#xff0c;之后拉取代码都不用重新输入&#xff1a; git config --global credential.helper store 2、查看git用户名&#xff1a; git config user.name 3、清空所有的用户名和密码&#xff1a; git config --system --unset credential.helper 4、清…

Django实现音乐网站 (21)

使用Python Django框架做一个音乐网站&#xff0c; 本篇音乐播放器功能完善及原有功能修改。 目录 播放列表修改 视图修改 删除、清空播放器 设置路由 视图处理 修改加载播放器脚本 模板修改 脚本设置 清空功能实现 删除列表音乐 播放列表无数据处理 视图修改 播放…

目标检测YOLO实战应用案例100讲-基于改进YOLO v7的智能振动分拣系统开发(续)

目录 3.2 引入EIOU损失函数 3.2.1 CIOU损失函数 3.3.2 基于Focal-EIOU损失函数的网络优化 ​编辑

【算法】TOP101-二叉树篇(持续更新ing)

文章目录 1. JZ36 二叉搜索树与双向链表2. 100. 相同的树3. 572. 另一棵树的子树4. BM26 求二叉树的层序遍历5. BM33 二叉树的镜像6. BM40 重建二叉树7. 106. 从中序与后序遍历序列构造二叉树 1. JZ36 二叉搜索树与双向链表 JZ36 二叉搜索树与双向链表 解题思路: 由题目可知,…