当前位置:首页 » 《关于电脑》 » 正文

vue识别\n换行

19 人参与  2024年04月21日 13:59  分类 : 《关于电脑》  评论

点击全文阅读


在项目中,需要渲染字符串文本,文本中需要通过\n换行, 如果直接渲染的话无法识别\n实现换行。

下面提供两种方式实现换行

1. 使用v-html渲染。

通过正则将字符串中\n转换成v-html可以识别的标签<br />,再通过v-html渲染。

<div v-html="text"></div>
this.text = str.replace(/\n/g,'<br />')

2. 通过css实现

<div style="white-space: pre-wrap;">{{text}}</div>

white-space属性值

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承white-space属性的值。

点击全文阅读


本文链接:http://zhangshiyu.com/post/98357.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 男友霸道给我开黑卡,转头却骂我是捞女最新章节_肖年顾客黑卡热文_小说后续在线阅读_无删减免费完结_
  • 他在回忆尽头全集_贺南舟许清梨叶絮完结txt_小说后续在线阅读_无删减免费完结_
  • 旅游结婚那天未婚夫另娶女秘书,我让他们一无所有连载_老公迎宾超长版_小说后续在线阅读_无删减免费完结_
  • 完结文异界修仙我的直播间能打赏核弹列表_完结文异界修仙我的直播间能打赏核弹(江流年沈红菱)
  • 全书浏览陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)_陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)全书结局
  • 老公出轨我助攻虐心反转_秦绍卿卿阿溪后续加长_小说后续在线阅读_无删减免费完结_
  • 替老婆坐牢出狱那天,我被送去斗兽场精校文本_许言沈宇郑子番茄热门_小说后续在线阅读_无删减免费完结_
  • 沐巍澜温溪:结局+番外(爱如一刹花火)电子书畅享阅读无广告
  • 傅凌川林柚续集(傅凌川林柚)章节前文+全书阅读(替嫁燃婚:小祖宗嘴硬腰软)最新连载
  • 资助生把导盲犬做成火锅后,我家杀疯了!列表_资助生把导盲犬做成火锅后,我家杀疯了!(陈米雪波波)
  • 沈瑾钰林沐橙豪门废妻浴火复仇续集(豪门废妻浴火复仇)章节在线阅读最近章节
  • 明明图分手费,我怎么就入赘了?(顾池柳如烟),明明图分手费,我怎么就入赘了?

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1