前端处理后端返回的数据中有\n\n字样的换行符标识

后端返回的数据:

上面圈着的部分就是\n,前端需要将数据进行换行,对于这类型的数据,在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理,那么内容是不会在有换行符的位置进行换行显示的

解决办法1:

使用css属性:

white-space:pre-line
或
white-space:pre-wrap

pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时才会换行

pre-line连续的空白符会被合并。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时会换行

解决办法2:

使用v-html输出文本

v-html="xxx.replace(/\n\n/g, '<br>')"

以上两种方法都可以实现

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

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

相关文章

UE5 半透明覆层材质

文章目录 前言介绍示例1示例2示例3 前言 本文采用虚幻5.2.1版本演示&#xff0c;介绍半透明覆层材质&#xff08;覆层材质&#xff09;。 介绍 半透明覆层材质是 UE5.1 版本 更新的功能&#xff0c;使用半透明覆层材质&#xff0c;可以轻松的给物体表面附着一层材质。 在UE5…

Matlab绘图 图例legend 太长,怎么减小指示线的长度

来源 绘图时&#xff0c;稍微减小文字已经不能正常放下图例&#xff0c;想通过调整图例指示线段长度缩减整个图例长度。 方法一 参考matlab官方论坛 leg legend(Plot1,Plot2,...); leg.ItemTokenSize [x1,x2]; By default x130 and x218 so put larger or smaller number…

zookeeper安装教程及其基本使用

目录 zookeeper下载&#xff1a; zookeeper下载官网&#xff1a; 本地安装配置&#xff1a; 启动zookeeper&#xff1a; 开启服务端&#xff1a; 启动客户端&#xff1a; 查看zookeeper的状态&#xff1a; zoo.cfg文件解读&#xff1a; zookeeper的集群安装&#xff1a…

享元模式 Flyweight Pattern 《游戏编程模式》学习笔记

如果我们要存储一个树一样的数据结构&#xff0c;直觉来说我们会这么写 但是实际上我们会发现&#xff0c;哪怕森林里有千千万万的树&#xff0c;它们大多数长得一模一样。 它们使用了相同的网格和纹理。 这意味着这些树的实例的大部分字段是一样的。 那么我们就可以将树共…

案例:Docker 镜像的创建及使用(commit与dockerfile方式)

文章目录 1、commit方式创建镜像1.1、前期准备1.2、制成镜像1.3、启动镜像1.3.1、启动镜像启动nginx1.3.2、一个命令直接全部启动1.3.3、两种方式区别 1.4、commit创建镜像方式的本质 2、Dockerfile的使用2.1、Dockerfile指令2.2、nginx镜像制作案例2.3、查看构建历史&#xff…

wordpress 打开缓慢处理

gravatar.com 头像网站被墙 追踪发现请求头像时长为21秒 解决方案一 不推荐&#xff0c;容易失效&#xff0c;网址要是要稳定为主&#xff0c;宁愿头像显示异常&#xff0c;也不能网址打不开 网上大部分搜索到的替换的CDN网址都过期了&#xff0c;例如&#xff1a;gravatar.du…

37.利用linprog解 有约束条件多元变量函数最小值(matlab程序)

1.简述 linprog函数主要用来求线型规划中的最小值问题&#xff08;最大值的镜像问题&#xff0c;求最大值只需要加个“-”&#xff09; 2. 算法结构及使用方法 针对约束条件为Axb或Ax≤b的问题 2.1 linprog函数 xlinprog(f,A,b) xlinprog(f,A,b,Aeq,beq) xlinprog(f,A,b,Aeq,…

C语言面试题

文章目录 把文件指针移动到文件头部的函数是什么取出当前文件指针位置的函数是什么编写函数实现字符串的倒序输出编写strlen,strcpy,strcat,strcmp源代码编写memmove,memcmp的源代码使用C语言实现单向链表排序和反序的示例代码STL中,对于vector和list容器的遍历可以使用迭代器…

Bug合集

这里会收藏后面所遇到的bug并附上具有参考的意义的博客&#xff0c;会持续更新 Java 1、SpringBoot升级2.6.0以上后&#xff0c;Swagger出现版本不兼容报错。 Failed to start bean ‘documentationPluginsBootstrapper‘&#xff1b; nested exception is java.lang.NullPo…

5.PyCharm基础使用及快捷键

在前几篇文章中介绍了PyCharm的安装和汉化,本篇文章一起来看一下PyCharm的基本用法和一些快捷键的使用方法。 本篇文章PyCharm的版本为PyCharm2023.2 新建项目和运行 打开工具,在菜单中——文件——新建项目 选择项目的创建位置(注意最好不要使用中文路径和中文名项目名称…

如何查询多级菜单(采用递归的方法)

应用场景 1.京东 京东的页面就是这么显示的在家用电器下面有电视.空调.洗衣机然后再电视下面又有全面屏电视.教育电视等等 2.我们的后端管理系统 我们后端在页面上显示的很多也是通过层级目录的显示出来。 如何实现 1.准备数据库 我们这里parent_id为0的为我们的一级菜单 …

算法刷题Day 59 下一个更大元素II+接雨水

Day 59 单调栈 503. 下一个更大元素II class Solution { public:vector<int> nextGreaterElements(vector<int>& nums) {int len nums.size();nums.insert(nums.end(), nums.begin(), nums.end());vector<int> descStk, rst(len, -1);for (int i 0; …

自己实现Linux 的 cp指令

cp指令 Linux的cp指令就是复制文件&#xff1a; cp: 拷贝(cp 拷贝的文件 要拷贝到的地址或文件)&#xff0c;cp b.c test.c 将b.c拷成test.c的一个新文件 Linux 系统初识_mjmmm的博客-CSDN博客 实现思路 打开源文件读文件内容到缓冲区创建新文件将读到的文件内容全部写入新文…

Apache+Tomcat 整合

目录 方式一&#xff1a;JK 1、下载安装包 2、添加依赖 3、启动服务&#xff0c;检查端口是否监听 4、提供apxs命令 5、检查是否确实依赖 6、编译安装 7、重要配置文件 方式二&#xff1a;http_proxy 方式三&#xff1a;ajp_proxy 方式一&#xff1a;JK 1、下载安装…

windows环境下如何更改pip安装的默认位置

1.查看配置信息 python -m site2.查看配置文件位置 python -m site -help3.修改配置文件 USER_SITE "D:\\soft\\Anaconda\\Lib\\site-packages" USER_BASE "D:\\soft\\Anaconda\\Scripts"如果遇到文件无法保存情况&#xff0c;请给用户增加权限。 4.…

flask----内置信号的使用/django的信号/ flask-script/sqlalchemy介绍和快速使用/sqlalchemy介绍和快速使用

信号 内置信号的使用 # 第一步&#xff1a;写一个函数 def test(app, **kwargs):print(app)print(type(kwargs))# 请求地址是根路径&#xff0c;才记录日志&#xff0c;其它都不记录print(kwargs[context][request].path)if kwargs[context][request].path /:print(记录日志…

微信如何多号定时群发?

微信作为国内最大的网络社交平台&#xff0c;目前用户已超过11亿。 掐点给朋友送生日祝福,给领导同事送新年祝福&#xff0c;提醒朋友的待办事项等等&#xff0c;这些定时发送功能一直都是微博 QQ&#xff0c;邮箱的专属&#xff0c;如果微信也能定时发送该多好&#xff1f;其…

借用和引用

文章目录 所有权引用和借用可变引用悬垂引用 所有权 Rust通过所有权来管理内存&#xff0c;最妙的是&#xff0c;这种检查只发生在编译期&#xff0c;因此对于程序运行期&#xff0c;不会有任何性能上的损失。 使用堆和栈的性能区别&#xff1a; 写入方面&#xff1a;入栈比在…

Qt实现可伸缩的侧边工具栏(鼠标悬浮控制伸缩栏)

Qt实现可伸缩的侧边工具栏 一直在网上找&#xff0c;发现大多的实现方案都是用一个按钮&#xff0c;按下控制侧边栏的伸缩&#xff0c;但是我想要实现鼠标悬浮在侧边栏的时候就伸出&#xff0c;移开就收缩的功能&#xff0c;也没找到好的参考&#xff0c;所以决定自己实现一个…

人工智能的未来:探索下一代生成模型

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 生成式 AI 目前能够做什么&#xff0c;以及探索下一波生成式 AI 模型需要克服的当前挑战&#xff1f; 如果你跟上科技世界的步伐&#xff0c;你就会知道生成式人工智能是最热门的话题。我们听到了很多关于…