vue项目的html渲染数据的时候‘ \n ’无法换行，如下：
//html
<p v-html='text'></p>
//渲染值
this.text = "我是第一行的哦\n我是第二行的哦"
如下图所示，未能换行
image.png
1.在使用 v-html 时添加样式，white-space:pre-wrap ,让浏览器保留空白和换行符。
<p v-html="text" style="white-space:pre-wrap"></p>
2、用 pre 标签包裹
被包围在 pre 标签中的文本通常会保留空格和换行符。
<pre><p v-html="text"></p></pre>
3、正则替换
用正则表达式把 \n 替换成
这样 v-html 就可以识别
<p v-html="text.replace(/\n/g,'<br/>')"></p>
vue项目的html渲染数据的时候‘ \n ’无法换行，如下： 如下图所示，未能换行image.png 解决方法：...
后端返回的字符串带有\n换行符，但Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格。下面是...
一、vue插入文本的方法： v-html 二、属性 HTML 属性中的值应使用 v-bind 指令。 三、表达式 ...
在windows 下换行符是\r\n在linux下换行符是\n 如果打开文本的时候想让\r\n转换成\n可以使用r...
Vue.js 模板语法 1、使用 {{...}}（双大括号）的文本插值 2、使用 v-html 指令用于输出 ht...
一、使用TextView 文本换行 后台使用“\n”换行符传输数据，客户端接收需进行如下转换： 富文本 后台使用H...
之前用vue html文本展示 用v-html就可以 在uni-app中也使用v-html 在h5 app 微信小...
本文介绍如何在 Unix 和 DOS 格式之间转换文本文件。DOS 文本文件带有回车符（ \r ）和换行符（ \n...
vue基本使用 未经同意 禁止转载 v-html 转换成富文本 有XSS的风险，会覆盖子组件 computed 有...
第一种方法： 前端获取后台带有\n 换行符的数据用 标签展示 第二种方法 前端获取后台带有\n 换行符的数据，...
本文标题：vue 里面使用 v-html 插入的文本带有换行符'\n'不换
本文链接：https://www.haomeiwen.com/subject/ynssirtx.html
网友评论