vue 富文本解析v-html不能转换的特殊换行＜br/＞字符

最新推荐文章于 2024-05-08 11:44:15 发布
置顶 最新推荐文章于 2024-05-08 11:44:15 发布
阅读量2.9k 收藏 4
点赞数
文章标签： html js vue css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lingshui147/article/details/115862895
版权

使用v-html 解析富文本，如果富文本里出现这种 

 

这种换行字符v-html只能转为

不知道大家是不是有遇到这种情况，我是使用replaceAll方法把<br /><br /><br /> \n 替换为\n，这样就可以换行输出了

注意，要在包裹的div 添加 style="white-space:pre-wrap" 才会换行，如果不添加该样式，会出现只是去掉 了字符但是不换行的情况

 

程序员-蓝天
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue处理后端传过来的换行文本和html
吴文静的博客
06-07 349
vue处理后端传过来的换行文本和html <span v-html="keepTextStyle(item.mailBody)"></span> methods: { keepTextStyle(val){ console.log(val) console.log(typeof val) console.log((typeof val)!='undefined') return (val + '').repl
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
wangEdtior粘贴内容有换行时报错解决
qq_41541368的博客
01-29 1212
粘贴内容有换行时浏览器会报错，Cannot read property ‘nodeName’ of undefined 去官网说明文档寻找解决办法时，发现靠谱点的只有粘贴过滤相关api，但是试了一边都不太行，最后只能选择使用自定义处理粘贴的文本内容。 这是官方文档的自定义处理 const E = window.wangEditor const editor = new E('#div1') // 配置粘贴文本的内容处理 editor.config.pasteTextHandle = function
vue 文本中的\n 、＜br＞换行显示
最新发布
CC酱写前端的博客
05-08 2350
注意： style中white-sapce: pre-wrap;一、背景： 后端接口返回数据以\n 作为换行符，前端显示时候需要换行显示；二、br 换行（可以使用v-html）三、把br替换成\n换行。
vue v-html换行回车失效
Cahier
04-02 1503
white-space: pre-wrap
vue v-html指令解析文本以后,换行丢失解决
Seeyoucm
01-19 5621
因为在做实际的业务需求web APP的时候,本身搭建框架是vue进行的 ,所以在做文本解析的时候,直接运用了指令v-html,但是问题出现了,文字,空格都可以解析,但是回车换行没有识别, 解决1:看了网上的方法,有些使用正则表达式进行匹配,替换,然后再进行渲染,我尝试了,但是我觉得有点麻烦 解决2:网上说的使用便签,我也尝试了,换行是有用了,但是我的文字太多了,原本多余的文字没有设置换行,所以这下...
解决：vue文本识别 “ \n ” 的换行问题（完整案例说明）
热门推荐
草巾冒小子的博客
08-15 5万+
文章目录vue文本识别 “ \n ” 的换行问题：（完整案例说明）一、需求场景：二、效果图对比：三、实现方法：1：通过 `css属性`实现2：使用`v-html`实现四、相关阅读参考：五、附：`response.data` - 后台返回的data截图:前端页面form表单填写： vue文本识别 “ \n ” 的换行问题：（完整案例说明） 一、需求场景： vue项目，axios.post提交...
接口数据的富文本带换行符怎么展示？
wangweiscsdn的博客
04-09 462
在css文件添加一行css就可以解决 .more{ white-space: pre-line; }
在vue中利用v-html按分号将文本换行的例子
10-15
今天小编就为大家分享一篇在vue中利用v-html按分号将文本换行的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
当使用`v-html`渲染的富文本中包含HTML标签，如`<img>`，尝试在CSS中通过类选择器或者 scoped 属性来修改这些元素的样式时，发现样式不起作用。例如，以下代码试图将图片设置为自适应大小，但无效果： ```html ...
Vue v-html 不能实现 ‘ \n‘
weixin_44911525的博客
12-07 567
v-html 实现不了编译效果
vue中解决字符串无法换行问题
g1437353759的博客
11-24 1419
degree就是那个储存内容的string 一开始在后面加了br发现当成字符串展示了 后来发现只需要把字符串放在pre里面，把之前的br换成’\n’就能用了
【replace正则】解决富文本解析后换行无效的问题
记录
03-18 1407
</p>使用wxParser插件解析后无效。测试了一下，如果是，会有换行的。多个<br>就有多个换行。ps.暂时还不知道怎么实现连续换行的转换pps.也不知道除了换行之外是不是还有别的也会变成<p>
vue项目中，使用v-html后样式没法改变
qq_34530330的博客
03-02 880
在vue单页模式中为了防止页面之间的样式互相影响，会加上scoped,之后就互相不受影响了，但是在使用 v-html时候样式没法改变，去掉scoped之后就可以了， ...
vue+element-ui处理文本中的\n和《br/》
静幽水
10-10 5308
在我们使用vue+element-ui开发web应用的时候，有的时候从数据库中获取到的数据包含换行符\n或者<br>标签
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富文本编辑器Quill实现Enter提交，Shift+Enter换行
高电平的博客
04-25 1091
在quill的配置中配置keyboard。
尚硅谷Vue学习——v-html指令
小缘同学的博客
03-17 602
1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： v-html会替换掉节点中所有的内容，{{xx}}则不会 v-html可以识别html结构 3.注意：v-html有安全性问题 在网站上动态渲染任意HTML非常危险，容易导致XSS攻击。 一定要在可信的内容上使用v-html，不要用在用户提交的内容上。 <!DOCTYPE html> <html lang="en"> <head> <met...
Vue用＜br＞自定义换行，用v-html渲染，hover的时候title也需要使用自定义换行或者显示一行用省略号展示，hover展示全部
m0_59157023的博客
12-15 975
哈喽 大家好啊,最近遇到一个需求：用自定义换行，hover的时候title也需要使用自定义换行然后我便想到了用自定义换行，然后用v-html渲染，则就正常显示了。
<div class="box"> 姓:<input type="text" v-model="firstName" /> <br /><br /> 名:<input type="text" v-model="lastName" /><br /><br /> 姓名：<span></span> </div> <script> new Vue({ el: ".box", data: { firstName: "张", lastName: "三", }, }); </script> </body> </html>这段代码input中无法显示姓和名
06-04
我看到你提供了一段 HTML 代码和 Vue.js 的相关代码。根据你的描述，你在这段代码中使用了 Vue.js 框架来绑定 input 元素的值，但是无法显示姓和名。 根据你提供的代码，我发现你没有在 span 元素中绑定姓和名的值。你可以使用插值语法 `{{ }}` 来在 span 元素中显示姓和名的值。具体来说，你可以将以下代码添加到 span 元素中： ``` {{ firstName + lastName }} ``` 这样，当你在 input 元素中输入姓和名时，它们的值就会显示在 span 元素中了。希望这个解决方法能够帮助到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值