前端接收后端返回换行符 /n 不生效

2023-10-31

问题:前端接收后端返回换行符 /n 不换行、不生效

解决方案:

一、 设置css的white-space属性

<div class="text-container">{{ text }}</div>
export default {
  data() {
    return {
      text: '这是第一行\n这是第二行',
    };
  },
};
<style scoped>
.text-container {
  white-space: pre-wrap;
}
</style>

二、将字符串里的\n替换为
,然后用v-html渲染字符串。

<div class="text-container">{{ text }}</div>
export default {
  data() {
    return {
      text: '这是第一行\n这是第二行',
    };
  },
};
this.text= resp.data.content.replace(/\n/g, '<br>')
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端接收后端返回换行符 /n 不生效 的相关文章

随机推荐

  • getline()的使用详解

    一 getline int main string line while getline cin line cout lt
  • 图像去噪的OPenCV添加噪声和去噪

    添加噪声 添加高斯噪声 IplImage AddGuassianNoise IplImage src 添加高斯噪声 IplImage dst cvCreateImage cvGetSize src src gt depth src gt n
  • sass的日常使用

    sass跟css的简单对比 css 由于CSS的语法不够强大 没有变量和合理的样式复用机制 使得逻辑上相关的属性值必须以字面的形式反复出现 导致难以维护 而动态演示语言为CSS赋予了动态语言的特性 极大的提高了样式语言的可维护性 sass
  • github.com访问慢解决

    修改hosts HOSTS文件路径 C Windows System32 drivers etc hosts 1 打开Dns查询 站长工具 http tool chinaz com dns 2 搜索http github com 3 把TT
  • 使用Linux内核里的spi屏驱动-fbtft

    Linux内核里已经提供spi接口小屏的设备驱动 在内核的配置选项 make menuconfig ARCH arm CROSS COMPILE arm linux gnueabihf Device Drivers gt Graphics
  • 多线程练习之:生产电脑

    生产电脑 题目 设计一个生产电脑和搬运电脑类 要求生产出一台电脑就搬走一台电脑 如果没有新的电脑生产出来 则搬运工要等待新电脑产出 如果生产出的电脑没有搬走 则要等待电脑搬走之后再生产 并统计出生产的电脑数量 public class Co
  • python乘法出现小数位很多_js小数运算出现多位小数如何解决

    小数相乘出现很多位小数的问题 这个问题自己以前也遇到过 现在特意来总结一下 Number类型 Number类型是ECMAScript中最常用和最令人关注的类型了 这种类型使用IEEE754格式来表示整数和浮点数值 浮点数值在某些语言中也被成
  • 字节跳动前端面经

    面试经历 我入职字节大概一个多月 目前准大四 实习生 现在写面经不仅仅是牛客网 YYSD 真tm灵 的还愿 还是就是想给大家推荐推荐我们部门 技术中台 可能大家对技术中台不太了解 但是大家肯定听说过掘金吧 我们组主要负责ByteTech 字
  • 相机的信噪比

    在图像传感器的成像过程中 真实的信号是无法探测到的理想值 在成像过程中理想值被引入了一系列的不确定性 最终形成读出信号也即图像 此过程中的不确定性被统一称为噪声 而信号与噪声的比值被定义为信噪比 Signal to NoiseRatio S
  • hibernate: Duplicate class/entity; Could not parse mapping document from resource

    近日在学习Hibernate时 总是遇到以下异常 org hibernate InvalidMappingException Could not parse mapping document from resource kpy db Cus
  • ModelScope-Agent: Building Your Customizable Agent System with Open-source Large Language Models

    本文是LLM系列文章 针对 ModelScope Agent Building Your Customizable Agent System with Open source Large Language Models 的翻译 ModelS
  • 1072. 开学寄语(20)

    下图是上海某校的新学期开学寄语 天将降大任于斯人也 必先删其微博 卸其QQ 封其电脑 夺其手机 收其ipad 断其wifi 使其百无聊赖 然后 净面 理发 整衣 然后思过 读书 锻炼 明智 开悟 精进 而后必成大器也 本题要求你写个程序帮助
  • Webpack 基础配置介绍(二)

    今天继续分享webpack的有关内容 我还是接着从上篇文章的项目来给大家分享后续内容 如果还有小伙伴没有阅读之前的文章 请关注博主进行阅读 今日分享 1 webpack的规范配置 2 webpack config js基础配置 3 单页开发
  • JSP+ssm计算机毕业设计考研资源共享平台设计与实现399xv【源码、数据库、LW、部署】

    项目运行 项目含有源码 文档 程序 数据库 配套开发软件 软件安装教程 环境配置 Jdk1 8 Tomcat7 0 Mysql HBuilderX Webstorm也行 Eclispe IntelliJ IDEA Eclispe MyEcl
  • 环境变量路径中有空格该怎么办?

    本机环境变量的设置 java home C Program Files Java jdk1 5 0 09 bat中的命令格式 java home bin java 或者 C Program Files Java jdk1 5 0 09 bi
  • Python、Matplot的subplot实现一行3列的子图绘制,并添加背景色

    Python Matplot的subplot实现一行3列的子图绘制 并添加背景色 1 可能遇到的问题 2 示例 1 绘制2 2 俩行俩列 的子图 并设置背景色 2 绘制1 3 一行三列 的子图 并设置横轴纵轴值 3 绘制1 3 一行三列 的
  • 记一次kafka Consumer线程停止消费过程分析

    前言 kafka消息队列在项目开发中经常被使用 尤其是在大数据领域经常见到它的身影 spring集成了kafka方便我们使用 只要引入spring kafka即可 问题描述 有一天我们后台版本发布 虽然改动很大 但是大家还是自信满满 因为经
  • Spring Boot中使用WebSocket [第三部分]

    使用消息队列实现分布式WebSocket 在上一篇文章 https www zifangsky cn 1359 html 中我介绍了服务端如何给指定用户的客户端发送消息 并如何处理对方不在线的情况 在这篇文章中我们继续思考另外一个重要的问题
  • PTA自测-1 打印沙漏 python实现

    本题要求你写个程序把给定的符号打印成沙漏的形状 例如给定17个 要求按下列格式打印 所谓 沙漏形状 是指每行输出奇数个符号 各行符号中心对齐 相邻两行符号数差2 符号数先从大到小顺序递减到1 再从小到大顺序递增 首尾符号数相等 给定任意N个
  • 前端接收后端返回换行符 /n 不生效

    问题 前端接收后端返回换行符 n 不换行 不生效 解决方案 一 设置css的white space属性 div class text container text div export default data return text 这是