当前位置: 首页 > 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

相关文章:

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

最近开发vue2 项目 &#xff0c;接口返回的是类似于这样的数据&#xff1a;我是第一行的哦\n我是第二行的哦 我是直接这样渲染的&#xff0c; //html <p v-htmltext></p>//渲染值 this.text "我是第一行的哦\n我是第二行的哦"但结果却是不如意&#x…...

Java失效算法与应用(FIFO、LRU、LFU)

文章目录 一、什么是失效算法二、先来先淘汰&#xff08;FIFO&#xff09;1、FIFO概述2、Java实现FIFO3、FIFO特点 三、最久未用淘汰&#xff08;LRU&#xff09;1、LRU概述2、Java实现LRU 四、最近最少使用&#xff08;LFU&#xff09;1、LFU概述2、Java实现LFU 五、应用案例 …...

Go语音介绍

Go语言介绍 Go 即Golang&#xff0c;是Google公司2009年11月正式对外公开的一门编程语言。 Go是静态强类型语言&#xff0c;是区别于解析型语言的编译型语言。 解析型语言——源代码是先翻译为中间代码&#xff0c;然后由解析器对代码进行解释执行。 编译型语言——源代码编…...

Vue2与Vue3响应式原理

Vue2的响应式 Vue3的响应式...

flask中写一个基础的sqlHelper类

写一个SQLHelper类&#xff1a; from flask_sqlalchemy import SQLAlchemydb SQLAlchemy()class SQLHelper:staticmethoddef add(record):db.session.add(record)return SQLHelper.session_commit()staticmethoddef add_all(records):db.session.add_all(records)return SQLH…...

opencv的Mask操作,选择图片中感兴趣的区域

最近做目标检测任务的时候&#xff0c;需要对固定区域的内容进行检测&#xff0c;要用到opencv的mask操作&#xff0c;选择图片固定的区域 代码 import cv2 import numpy as npimg cv2.imread(data/images/smoking.png)# 弹出一个框 让你选择ROI | x,y是左上角的坐标 x,y,w,…...

一次有趣的Webshell分析经历

一次有趣的Webshell分析经历 1.拉取源代码2.解密后门代码3.分析webshell逻辑4.分析404的原因5.附&#xff1a;格式化后的php代码 1.拉取源代码 在对某目标做敏感目录收集时发现对方网站备份源代码在根目录下的 backup.tar.gz&#xff0c;遂下载&#xff0c;先使用D盾分析有没有…...

【NLP概念源和流】 05-引进LSTM网络(第 5/20 部分)

一、说明 在上一篇博客中,我们讨论了原版RNN架构,也讨论了它的局限性。梯度消失是一个非常重要的缺点,它限制了RNN对较短序列的建模。香草 RNN 在相关输入事件和目标信号之间存在超过 5-10 个离散时间步长的时间滞时无法学习。这基本上限制了香草RNN在许多实际问题上的应用,…...

Vue没有node_modules怎么办

npm install 一下 然后再npm run serve 就可以运行了...

企业级高负载web服务器-Tomcat小项目

目录 web静态动态页面区别安装java环境安装Tomcat安装Tomcat包到目录查看Tomcat主目录结构查看Tomcat配置目录结构Tomcat管理Tomcat web管理功能 部署jpress应用 web静态动态页面区别 静态页面&#xff1a; 在网站设计中&#xff0c;纯粹HTML格式的网页&#xff08;可以包含图…...

《golang设计模式》第一部分·创建型模式-03-建造者模式(Builder)

文章目录 1. 概念1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1. 概念 1.1 角色 Builder&#xff08;抽象建造者&#xff09;&#xff1a;给出一个抽象接口&#xff0c;以规范产品对象的各个组成成分的建造。ConcreteBuilder&#xff08;具体建造者&#xff09;&a…...

git 忽略掉不需要的文件

第一步&#xff1a;创建.gitignore文件 touch .gitignore 第二步&#xff1a;使用vi编辑器 输入不需要的文件&#xff0c;或用通配符*来忽视一系列文件 效果&#xff1a;...

摄像机sd卡格式化怎么恢复数据?简单五步轻松解决

在使用摄像机时&#xff0c;有时不慎将SD卡格式化&#xff0c;导致重要的照片或视频文件丢失。然而&#xff0c;不必惊慌&#xff0c;本文将详细解释如何恢复被格式化的摄像机SD卡上的数据&#xff0c;可通过下面提供的五步&#xff0c;轻松解决数据丢失问题&#xff0c;以确保…...

1-4 AUTOSAR方法论--开发流程

目录 一、方法论 二、单个ECU开发流程 一、方法论 AUTOSAR 方法论&#xff08;AUTOSAR Methodology&#xff09;中车用控制器软件的开发涉及系统级、ECU 级的开发。 系统级&#xff1a;主要考虑系统功能需求、硬件资源、系统约束&#xff0c;然后建立系统架构&#xff1b; 输…...

Win10查询硬盘序列号

添加wmic命令 winR cmd命令 wmic diskdrive get model, serialnumber...

减少错误和重复工作:PDM系统的智能排错功能

减少错误和重复工作&#xff1a;PDM系统的智能排错功能 在产品开发和制造过程中&#xff0c;错误和重复工作常常是企业面临的挑战。这不仅浪费了宝贵的时间和资源&#xff0c;还可能导致产品质量下降和生产延误。PDM系统&#xff08;Product Data Management&#xff0c;产品数…...

【面试题】作用域面试题

作用域 全局作用域局部作用域&#xff08;函数里&#xff09;也称函数作用域块级作用域 {}包裹的 例如if for 括号&#xff08;&#xff09;也算 变量 全局变量 谁都能用&#xff0c;在函数内也可以局部变量&#xff0c;只能在该函数内用&#xff0c;如果这个函数嵌套了子函…...

08 定时器(下)

08 定时器&#xff08;下&#xff09; 本文内容 定时器处理非活动连接模块&#xff0c;分为定时方法与信号通知流程&#xff1b;定时器及其容器设计、定时任务的处理。 定时器设计&#xff0c;将连接资源与定时事件等封装起来&#xff0c;具体包括连接资源、超时时间和回调函…...

C++设计模式之适配器设计模式

文章目录 C适配器设计模式什么是适配器设计模式该模式有什么优缺点优点缺点 如何使用 C适配器设计模式 什么是适配器设计模式 适配器设计模式是一种行为型设计模式&#xff0c;它允许你将两个不兼容的接口组合在一起&#xff0c;使它们能够协同工作。 该模式有什么优缺点 优…...

Maven项目解决cannot resolve plugin maven-deploy-plugin:2.7

导入maven项目后&#xff0c;编辑的时候提示一些插件加载失败&#xff01;大概率是你的网络有问题&#xff0c;插件下载失败。 如下图&#xff1a;&#xff08;网络突然好了&#xff0c;我想截图但是没有复现&#xff0c;用网上找到的截图代替&#xff0c;明白意思就行&#x…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...