前端处理后端返回的数据中有\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,…

5.PyCharm基础使用及快捷键

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

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

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

微信如何多号定时群发?

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

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

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

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

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

Kafka-消费者组消费流程

消费者向kafka集群发送消费请求&#xff0c;消费者客户端默认每次从kafka集群拉取50M数据&#xff0c;放到缓冲队列中&#xff0c;消费者从缓冲队列中每次拉取500条数据进行消费。

JVM面试突击班2

JVM面试突击班2 对象被判定为不可达对象之后就“死”了吗 对象的生命周期 创建阶段 &#xff08;1&#xff09;为对象分配存储空间 &#xff08;2&#xff09;开始构造对象 &#xff08;3&#xff09;从超类到子类对static成员进行初始化 &#xff08;4&#xff09;超类成…

数学建模学习(10):遗传算法

遗传算法简介 • 遗传算法&#xff08;Genetic Algorithms&#xff09;是基于生物进化理论的原理发展起来的一种广为 应用的、高效的随机搜索与优化的方法。其主要特点是群体搜索策略和群体中个体之 间的信息交换&#xff0c;搜索不依赖于梯度信息。它是20世纪70年代初期由美国…

铸铝齿轮泵比例流量阀放大器

液压齿轮泵是一种常用的液压泵&#xff0c;被广泛应用于各种低压系统中&#xff0c;如采矿、冶金、建筑、航空、航海、农林等机械的中、高压液压系统中。 液压齿轮泵的特点是结构简单&#xff0c;制造方便&#xff0c;价格低廉&#xff0c;体积小&#xff0c;重量轻&#xff0…

机器学习深度学习——循环神经网络RNN

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习—语言模型和数据集 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助…