当前位置: 首页 > news >正文

【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行

最近开发vue2 项目 ,接口返回的是类似于这样的数据:我是第一行的哦\n我是第二行的哦

我是直接这样渲染的,

//html
<p v-html='text'></p>//渲染值
this.text = "我是第一行的哦\n我是第二行的哦"

但结果却是不如意,变成了下面这样

在这里插入图片描述

解决方法

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>

我是用第二种方法解决的。

总结以防下次遇到,参考文章:https://www.jianshu.com/p/3719cd89c0bd

http://www.lryc.cn/news/106629.html

相关文章:

  • Java失效算法与应用(FIFO、LRU、LFU)
  • Go语音介绍
  • Vue2与Vue3响应式原理
  • flask中写一个基础的sqlHelper类
  • opencv的Mask操作,选择图片中感兴趣的区域
  • 一次有趣的Webshell分析经历
  • 【NLP概念源和流】 05-引进LSTM网络(第 5/20 部分)
  • Vue没有node_modules怎么办
  • 企业级高负载web服务器-Tomcat小项目
  • 《golang设计模式》第一部分·创建型模式-03-建造者模式(Builder)
  • git 忽略掉不需要的文件
  • 摄像机sd卡格式化怎么恢复数据?简单五步轻松解决
  • 1-4 AUTOSAR方法论--开发流程
  • Win10查询硬盘序列号
  • 减少错误和重复工作:PDM系统的智能排错功能
  • 【面试题】作用域面试题
  • 08 定时器(下)
  • C++设计模式之适配器设计模式
  • Maven项目解决cannot resolve plugin maven-deploy-plugin:2.7
  • Postgresql源码(110)分析dsm动态共享内存分配与共享内存mq实例
  • 51单片机学习--蜂鸣器播放音乐
  • 【Vue组件eval方法的使用】
  • C++ 多文件结构和编译预处理命令
  • QT实现中英文键盘
  • java中并发编程CompletableFuture和supplyAsync的用法
  • chrony服务器
  • 春秋云镜 CVE-2021-24762
  • K8s中的Service
  • [软件工程] 全局分析规格说明书模板
  • 【JAVASE】封装