Vue 展示的文本换行 静态文本按格式显示 textarea文本的换行 亲测有效

最新推荐文章于 2024-09-19 10:53:28 发布
最新推荐文章于 2024-09-19 10:53:28 发布
阅读量7.9k 收藏 4
点赞数 4
分类专栏： Vue 文章标签： Vue Javascript textarea 换行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42556438/article/details/102862462
版权
在Vue项目中，遇到需要展示textarea文本并保持换行格式的需求。本文介绍了两种解决方案：1. 使用v-html将/n替换为<br>，但需注意XSS安全问题；2. 利用CSS样式white-space: pre-wrap，此方法更安全且无额外风险。推荐使用第二种方法。
摘要由CSDN通过智能技术生成

需求

一个商品管理系统，需要新增一个商品的信息，有一个备注字段，需要做成textarea，在textarea中用户是可以进行换行的。在新增完商品之后在查看详情时，备注字段的显示需要和textarea中的格式一致。

解决方案

1.将字符串的"/n"替换成html中的换行标签 "br"使用v-html绑定

<template>
	<h>备注</h>
	<div v-html="remark"></div>
最低0.47元/天 解锁文章
写代码的贝塔子
关注
专栏目录
elementui文本框换行_vue:element-ui输入框绑定回车事件
weixin_42282699的博客
12-23 2952
参考：vue监听input输入框的回车事件：keyup事件，加enter修饰符。如果input是组件，加上.native修饰符。例如：@keyup.enter="方法名"登录new Vue({methods: {login() {console.log('哎呀，登录中...');}}}).$mount('#app')在element-ui中：el-input绑定了@keyup.enter.na...
editormd富文本编辑器
qq_48971830的博客
06-01 367
vue.js editormd TeX 科学公式（基于 KaTeX)
js如何识别出字符串中的回车 \n并输出换行
热门推荐
dxj124的博客
07-10 1万+
1.使用replace全局替换 str=str.replace(/\n/g,"<br/>") 2.正则表达式 var reg = new RegExp("\r\n", "g");//g,表示全部替换 lst[count].Action = lst[count].Action.replace(reg, "<br/>");\\这样Action内容在网页上会自动换...
解决vue字符串换行问题(绝对管用)
11-19
vue 中 用 {{}} 进行数据绑定的时候，如果我么你想让字符串换行是不生效的 解决办法，不用上边的方式进行数据绑定，用v-html标签代替{{}} data中的str为 “11112222” 例1， {{str}} 例1效果 11112222 例2， 例2效果 1111 2222 补充知识：vue的this.$router.push()方法跳转路由带参数 这个方法需要注意一点，path和params不能同时使用使用了path，params就失效了 解决方法
Vue 文本换行攻略，对实际开发很有帮助
weixin_52648900的博客
09-19 1596
非常详细的介绍了四种实现文本换行处理的方法，分别在不同的场合使用，感兴趣的话可以了解一下
vue中展示textarea内容
wch19960518的博客
06-04 441
textarea内容分段展示到页面。
vue 标签内文本换行换行问题:“white-space: pre-wrap“
peer__的博客
07-01 780
2.换行之后会带来另一个问题,第一行抬头渲染时会被加入一个空格,并且替换不了那个空格,我的解决方法是加上属性"text-index:-5px;"反向使用首行缩进,抵消掉开头的空格。1.vue标签内容带回车符,仍然不会换行显示,这时加上"white-space: pre-wrap"属性后就能显示换行符"\n"的效果了。
vue页面中的文字换行问题
蜡笔小星的博客
12-14 1772
vue页面中文字换行
vue后台多行文本回车换行，网站页面显示换行
weixin_57792130的博客
05-11 753
【代码】vue后台多行文本回车换行，网站页面显示换行。
textarea剩余字数
06-21
静态文本与动态文本 在实际应用中，`textarea`的内容可以通过JavaScript动态设置，这使得可以实现动态加载或者根据用户行为改变`textarea`的内容。例如，通过`document.getElementById('example').value = '新文本...
js代码编辑器制作javascript在线编辑器格式显示代码
05-14
这些编辑器组件提供了基本的文本输入功能，并且支持代码的格式化和高亮。 2. **语法高亮**：为了让代码更易读，我们需要实现语法高亮功能。这可以通过分析代码结构并根据不同的语言关键字和语法规则应用不同的颜色...
vue结合html实时截取textarea文本
07-12
vue结合html实时截取textarea文本，获取鼠标下标，截取自定义文本，不错的demo
vue直接展示带有换行符号的字符串
Franky
10-19 942
white-space: pre-wrap
vue 文本中的\n 、＜br＞换行显示
CC酱写前端的博客
05-08 6271
注意： style中white-sapce: pre-wrap;一、背景： 后端接口返回数据以\n 作为换行符，前端显示时候需要换行显示；二、br 换行（可以使用v-html）三、把br替换成\n换行。
Vue实现字符串换行
用心创作每一篇文章
11-04 4211
因为我用的Element UI框架，所以是打开F12查看表格内文字的父级元素，给这个父级元素加上。图中加入\n是起换行的作用，但是光写这个是不够的。，那么还是不生效的，需要删掉标签中的scoped。在网上查了很多种方法，但都没有效果。一般写到这里，已经可以实现效果了。还有一种比较简单的方法。
vue.js 回显textarea入的空格和换行
lemon今天学习了吗？的博客
11-23 5762
一、场景：用户在表单或者textarea中输入的带空格和换行的内容提交后，在其他地方查看输入内容必须与输入的内容保持一致。
vue中textarea填入的换行以及空格，页面对应换行
PhoenixGuangyu的博客
05-08 1368
只需要在展示的地方加上 style="white-space: pre-line"
vue span文本换行
最新发布
10-30
在Vue.js中，如果你想让`<span>`元素内的文本换行，虽然`<span>`标签默认不支持直接换行，但你可以通过CSS样式来实现。主要有两种方法： 1. **HTML属性**：如果你需要临时换行，可以使用`<br>`标签，它是一个内联元素，会在浏览器中换行显示： ```html <span>{{ 'This is a line<br>and another one.' }}</span> ``` 2. **CSS样式**：如果你想更精细地控制文本样式，可以在`<span>`上应用`white-space` CSS 属性设置为`break-word`或`pre-wrap`，它们会自动在单词边界断行： ```html <span style="white-space: pre-wrap;">这是一段自动换行的文本</span> ``` 或者使用`display: inline-block;` 和 `line-height: normal;` 来模拟块级元素的行为： ```html <span style="display: inline-block; white-space: normal;"> 这是<span>多行</span>文本 </span> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值