vue识别\n换行

在项目中，需要渲染字符串文本，文本中需要通过\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`属性的值。

原文链接：https://blog.csdn.net/qq_42529835/article/details/130317984

Add a comment

Hot

New

Pas encore de commentaire, ajoutez le premier.

弦圈热门内容

Keep user logged in using Django and Vue 3

The request.session object will automatically generate a cookie with the default name sessionid, which stores the session's session key value. When the session expires, the cookie will automatically removed. Only when the cookie is cleared can the logged in user log in again.Set the expiration time of the session through the backend, and when the time is up, you can see through the browser that the cookie will automatically disappear. Therefore, it is only necessary to set that the token value i ...

Comment configurer PrismJS et le plugin Autoloader avec Nuxt 3?

Dans un précédent article intitulé Comment rendre les mathématiques dans vue ou nuxt?, nous avons expliqué comment rendre des équations mathématiques dans Nuxt.js en utilisant un CDN local. Ce CDN local permet de charger facilement plusieurs bibliothèques JavaScript sans ralentir le chargement de la page.PrismJS est une bibliothèque JavaScript légère qui permet de mettre en évidence les blocs de code sur vos pages. La configuration habituelle de PrismJS (voir Comment mettre en valeur la syntaxe ...

Python generates random strings

There are two ways to generates random strings. The first one is to list all letters and numbers, and use random package.import random base_str ='ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789' p = random.sample(base_str, 5) print(p) >>>['S','P','G','Z','A'] The second method is to use string package directly.import string value = ''.join(random.sample(string.ascii_letters + string.digits, 8)) print(value) >>>PpvgJLmS

Python实现语音朗读

Python实现tts功能，有以下几种方法：（1）可以使用pyttsx3库安装：pip install pyttsx3以下是示例：import pyttsx3 engine = pyttsx3.init() engine.say('开车不规范，亲人两行泪，I love China') engine.runAndWait()（2）使用win32com库该库为调用Windows自带的语音功能，不能调音量和语速。只需安装pywin32就可以运行pip install pywin32以下为示例：import win32com.client speaker = win32com.client.Dispatch("SAPI.SpVoice") speaker.Speak("hello")（3）可以使用百度的baidu-aip库安装：pip install baidu-aip该库是付费的，质量和效果会更好，支持试用。

An introduction to different branches of mathematics

The note is mainly a sketch of basic knowledge concerning general topology, differential geometry, functional analysis, algebraic geometry, etc., starting from a discussion of Euclidean spaces. However, there maybe some mistakes in the note, so use at your own risk. For simplicity, some details are omitted and can be found in the references provided. Further materials concerning algebraic geometry, especially arithmetic algebraic geometry, can be referred to another note written by the author, N ...

Some chunks are larger than 500 KiB after minification

When your vue/nuxt project is large, running npm run build  may output the error : WARN 15:32:15 (!) Some chunks are larger than 500 KiB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks ...

Nginx is installed but command not found

Problem. I installed nginx on my Debian 12 server following the steps in the official documentation Installing NGINX Open Source | NGINX Documentation. At first, everything is OK😇. Running sudo nginx -v returns the correct version of nginx.However, recently, when I ran the same command, it returned command not found:sudo nginx sudo: nginx: command not found nginx bash: nginx: command not foundEither sudo nginx or nginx gives the same result😣.Solution. To solve this problem, first you need to de ...

Differences between localStorage, sessionStorage and cookies

We can store tokens and user information in localStorage, sessionStorage, or cookies. They are all ways of browser that store data locally. In browser, open the developer mode, and click Application. Then you can view the messages stored in the localStorage, sessionStorage, and cookies on the website.Here are some differences between LocalStorage, SessionStorage, and Cookies:Data in LocalStorage have no lifecycle which means it will never expire, and need to be manually deleted. It is merely sto ...

The Application of AI Spark Big Model in Natural Language Processing (NLP)

IntroductionText analysis is one of the most basic and essential processes in Natural Language Processing (NLP), and it entails extracting valuable insights and information from text data (Cecchini, 2023). With the increasing complexity and volume of text data, it is crucial to focus on the efficiency and scalability of the methods. Cecchini (2023) defines AI Spark NLP as a high-performance Python library based on Apache Spark that provides a complete solution for text data processing. Apache Sp ...

Mathematical analysis notes

1. Mean value theoremsTheorem 1.1. ($\color{red}{\textrm{Rolle's Theorem}}$) Let $f$ be a function that satisfies the following conditions:$f$ is ${\color{Cyan}{\textrm{continuous}}}$ on the ${\color{orange}{\textrm{closed}}}$ interval $[a,b]$.$f$ is ${\color{Cyan}{\textrm{differentiable}}}$ on the ${\color{orange}{\textrm{open}}}$ interval $(a,b)$.$f(a) = f(b)$Then there exists $\zeta\in(a,b)$ such that $f'(\zeta) = 0$.Theorem 1.2. ($\color{red}{\textrm{The Mean Value Theorem}}$) Let $f$ be a f ...

pyttsx3运行错误

接上文Python实现语音朗读，运行示例代码时import pyttsx3 engine = pyttsx3.init() engine.say('开车不规范，亲人两行泪，I love China') engine.runAndWait()弹出以下错误：经过检查，pywin32等库都已经安装好了。尝试使用win32com库替代pyttsx3，结果仍然报错，报错内容为win32 api。之后又尝试了几种办法，仍然都是跟win32有关的报错。因为之前pip安装总是SSL报错，刚开始以为是SSL报错导致安装出错。但是修复SSL报错问题后（见Python pip安装SSL证书错误），该问题仍然没解决。最后经过了解，可能是pywin32版本过高所导致。一般需要将pywin32版本控制在305以下，可以使用225或者226这样的低版本。于是使用pip下载对应版本pip install pypiwin32 pip install pywin32 == 225然而，下载时发现已经没有225版本可以下载。因此另寻办法。最终，发现是pywin32安装的版本有问题，导致包虽然有了，但是却无法识别，导致出现N ...

大学毕业转行后的一点想法

最近成功把以前写的PDF格式的数学文章，几乎完美复刻到HTML网页上面，文章中的数学公式使用JS插件Mathjax渲染。之后会陆续更新到网站上，希望以后能让更多人无需下载就能看到，这也算给大学四年一个结尾。链接如下👇👇👇Note on arithmetic algebraic geometry, An introduction to different branches of mathematics, Note on perfectoid spaces, 代数几何简介然后我目前只会把我以前留下的notes、introduction之类的弄成HTML这样网页的形式。至于我写的论文存arXiv上面就好了，谷歌搜也能搜到我的论文。目前来看，距离我论文完成也过去一年半了，并没有太多人对于推广perfect这一概念感兴趣。但值得一提的是，目前来看，我的工作更加受到老外的欣赏和认可，没有一个中国的Phd给我写过信，说看过我的文章。虽然关于perfect这一系列的工作没有全部完成，还可以继续深入耕耘，说不定还能多产出几篇论文吧，算下来我本科完成了4篇论文，有5篇未完成，总页数超过100页。但这一切 ...

Manitori