识别后端返回的字符串中携带的空格 以及换行 要在前端展示 v-html

server/2024/12/28 16:55:17/

1.直接使用v-html
 

 <view v-html="formattedIssueDesc"></view>

2.由于直接使用 v-html 指令可能不会将 \n 解释为换行,所以就有第二种
 

<template><view v-html="formattedIssueDesc"></view>
</template><script>
export default {data() {return {issueDesc: '后端返回字符串\n后端返回字符串\n后端返回字符串'};},computed: {formattedIssueDesc() {return this.issueDesc.replace(/\n/g, '<br/>');}}
};
</script>

3.还有最后一种 使用 CSS white-space 属性

通过设置 CSS 样式来保留文本中的空白符,包括换行符。但是,请注意,white-space: pre 会保留所有的空白符,包括空格和制表符,并且文本会以等宽字体显示。而 white-space: pre-line 会合并连续的空格,但保留换行符。
 

<template><view style="white-space: pre-line;">{{ issueDesc }}</view>
</template><script>
export default {data() {return {issueDesc: '后端返回字符串\n后端返回字符串\n后端返回字符串',};}
};
</script>


http://www.ppmy.cn/server/153967.html

相关文章

重生之我在异世界学编程之C语言:数据在内存中的存储篇(上)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 目录 引言正文一、数据类型介绍1.内置类型2.自定义…

机器人角度参考方式

机器人的角度可以根据需求和系统设计来决定。通常情况下&#xff0c;机器人角度&#xff08;如航向角或偏航角&#xff09;有两种常见的参考方式&#xff1a; 参考开机时的 0&#xff1a;这是最常见的方式&#xff0c;机器人在开机时会将当前的方向作为 0&#xff08;即参考方向…

什么是 DevOps 自动化?

DevOps 自动化是一种现代软件开发方法&#xff0c;它使用工具和流程来自动化任务并简化工作流程。它将开发人员、IT 运营和安全团队聚集在一起&#xff0c;帮助他们有效协作并交付可靠的软件。借助 DevOps 自动化&#xff0c;组织能够处理重复性任务、优化流程并更快地将应用程…

【C语言】斐波那契数列

已知Fibonacci数列为1,1,2,3,5,8,13,…&#xff0c;用递归法编写求Fibonacci数的函数&#xff0c;在主函数中输入一个自然数&#xff0c;输出不小于该自然数的最小的一个Fibonacci数。 #include <stdio.h> int Fib(int f) {if (f < 2) return 1;else return Fib(f - …

堆排序——C语言实现

1. 代码结构概述 核心功能&#xff1a;将数组中的元素按照升序排列。主要步骤&#xff1a; 构建最大堆&#xff1a;将输入数组组织成最大堆&#xff08;每个节点的值都大于或等于其子节点&#xff09;。堆排序&#xff1a;每次将堆顶&#xff08;最大值&#xff09;移到数组末…

【国产NI替代】基于FPGA的32通道(24bits)高精度终端采集核心板卡

32通道&#xff08;24bits&#xff09;高精度终端采集核心板卡 采用 EP4CE115F29I7 型号的 FPGA &#xff0c;是一款 高精度&#xff0c;多通道动态信号采集核心板&#xff0c;核心 板主要分为 2 块板卡&#xff0c;一块为通讯板&#xff0c;一块 为采集板&#xff0c;均有 …

分享一下使用 AI 开发个人工具的迭代过程

分享一下使用 AI 开发个人工具的迭代过程&#xff1a;1. 找 gpt/claude 要一个 super shady coder 的人设 prompt&#xff1b;2. 简单介绍项目背景和基础需求给 gemini&#xff0c;生成最初的细化需求&#xff1b;3. 根据细化需求再次分析&#xff0c;完善边界条件&#xff0c;…

第十九章 C++ 日期 时间

C 日期 & 时间 C 标准库没有提供所谓的日期类型。C 继承了 C 语言用于日期和时间操作的结构和函数。为了使用日期和时间相关的函数和结构&#xff0c;需要在 C 程序中引用 <ctime> 头文件。 有四个与时间相关的类型&#xff1a;clock_t、time_t、size_t 和 tm。类型…