vue文本插值换行无效

最新推荐文章于 2024-08-19 09:38:27 发布
最新推荐文章于 2024-08-19 09:38:27 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： css vue 文章标签： vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soundofsnow/article/details/127708906
版权

vue文本插值换行符无效

这是后端返回的数据：
在这里插入图片描述

可以看到后端返回的数据是有换行的，但是在vue中进行文本插值后换行就没了，如图：

在这里插入图片描述
这是代码：

<div class="container__brief">
        {
  { briefDesc }}
</div>
//无css

问题就是这样。

有几个解决方案。

pre 可定义预格式化的文本

<div class
最低0.47元/天 解锁文章
soundofsnow
关注
专栏目录
如何在Uniapp中实现换行
weixin_52311740的博客
07-18 1835
uniapp是一款基于vue.js开发的跨平台应用开发框架，可用于开发ios、android和web三个平台的应用。在实际开发过程中，我们可能会遇到需要多行文字的情况，那么如何在uniapp中实现换行呢？在uniapp中，我们通常使用view标签来布局页面，而text标签是用来放置文字内容的。在view标签中使用text标签，可将文本按照标签宽度自动换行。Uniapp支持CSS样式，我们可以通过样式来实现多行文字的换行。如果需要手动进行换行，可以使用HTML中的。一、在view标签中使用text标签。
Vue基础
Mrm的博客
06-28 2418
html 超文本标记语言(HyperText Mark-up Language) html元素：块元素标签（行元素）和内联元素标签（行内元素） 块元素独占一行，块元素之后需要换行； 例如：标题标签，段落标签，通用块容器标签。 内联元素可以排列在一行，设置宽高无效，快高由内容撑开（特殊除外）。 例如：超链接标签，图片标签（支持宽高） html注释： css注释：/* */ js注释：// css引入方式：内联式（行内样式）、嵌入式（头标签中）、外链式 css选择器：标签选择器、类选择器、id选择器、
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
amoureux555的博客
08-02 4305
【vue】vue 里面使用 v-html 插入的文本带有换行符'\n'不换行
vue中换行符不换行、不生效的处理(\n或者＜br＞)
热门推荐
编程界明世隐的博客
03-10 4万+
先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span>{{msg}}</span> </d
Vue中解析换行展示
最新发布
南城
08-19 703
替换换行符: 使用计算属性将 \n 替换为标签。CSS 处理: 使用 white-space: pre-line 来保留换行符。按行渲染: 将文本按行分割并使用 v-for 渲染。选择适合你需求的方法来处理换行符。
vue项目使用xlsx-style导出自定义格式excel
boboboke
02-22 7137
一.遇到问题 1.给自定义格式的excel中的合并单元格加边框的时候,出现边框不完整的情况. 解决:将该合并单元格拆分成最小单位的单元格,设置其边框属性. 直接赋值的话不可行,因为子单元格并没有边框属性,只有合并单元格才有, 这里使用的方法是:记录合并单元格的属性信息, 然后循环对子单元格赋值. 代码: function addRangeBorder(range,ws){ let arr...
vue中v-html识别\n换行
hnnd123的博客
05-06 1万+
如果需要合并空格可以使用： 附：white-space属性（来源于MDN） normal 连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。 nowrap 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。 pre 连续的空白符会被保留。在遇到换行符或者元素时才会换行。 pre-wrap 连续的空白符会被保留。在遇到换行符...
uni-app小程序换行符\n不识别问题
ddyy2695734664的博客
08-03 947
这三步反正可以了：前两步安卓可以ios不行，加上最后一步ios可以了；1.必须得用text标签。
vue换行符不生效
weixin_45774432的博客
03-24 815
回车符在html标签中默认转化为 \n const msg = ‘aaaaaaaaa\nbbbbbbbbb’ {{ msg }} 效果： aaaaaaaaabbbbbbbbbb 解决办法： 一： 为div添加样式：white-space: pre-wrap 即可 {{ msg }} 或者 二： 将 \n 替换成 , const msg = str.replace(’/\n/g, ‘’) ...
解决Vue大括号字符换行踩的坑
01-18
在Vue中用大括号显示的变量，加 会直接被当成字符串显示出来，加\n显示一个空格，加\r\n显示两个空格，因为{{}}}是文本插值，内部都会按照普通字符串进行处理，可以用v-html进行显示 如下显示name变量 data() { ...
Vue3编译器
cookie-y的博客
12-13 918
Vue的编译过程
前端速成教程（HTML、CSS、JS、Vue…）
www.h y p e r p l a s m a.top
05-06 3373
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
Vue v-html 不能实现 ‘ \n‘
weixin_44911525的博客
12-07 644
v-html 实现不了编译效果
vue中转译\n\r
MISS_zhang_0110的博客
07-05 1763
vue中转译\n\r一、replace（）方法二、添加样式三、添加pre标签 \r是回车,光标回到行首. \n是换行,光标下移一格 linux系统只有\n,windows系统每行的结尾是\r\n,mac每行是换行\r 所以mac系统的文件在windows上打开会变成一行,而windows上的文件在linux上打开,每行的结尾多一个^M字符(原本是\m,这里被转化了) 一、replace（）方法 this.rightLog = res.data.consoleLog.replace(/\n/gm, "&l
laravel-vue后端返回数据的字符串中（＜br/＞ \n）换行无效
N_x1122的博客
02-17 1305
vue 后端字符串中的 换行无效
vue,v-html如何识别\n换行符
白日梦想家
04-02 3636
vue,v-html如何识别\n换行符 <span v-html="value.replace(/\n/gm, '<br>')" /><br> 对应的value value='您的数据中，如果字符串包含换行符\n它将被翻译为文档中的换行符' 最终结果 您的数据中，如果字符串包含换行符 它将被翻译为文档中的换行 ...
v-html 不识别\n解决方法
Harley567
03-24 3010
v-html 不识别\n解决方法
uni-app换行符\n及空格渲染问题
qq_43628158的博客
04-13 1万+
1、v-text渲染\n没效果解决方案 方法一：使用v-html（不建议，因为小程序不支持v-html，如果不考虑小程序，可以使用） 方法二：对css增加white-space:pre-wrap; <template> <view class="page_bar"> <view v-text="msg" style="white-space:pre-wrap;"></view> </view> </template> <sc
vue导出excel文本换行
07-04
在Vue中要实现导出Excel文本的换行，可以通过在文本内容中添加换行符（`\n`）来实现。 例如，假设我们有一个包含多行文本的数据数组。我们可以使用`map`方法遍历数组，对每个文本进行处理，将每行文本的末尾添加`\n...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值