【前端vue】elementui textarea显示换行问题

最新推荐文章于 2024-05-08 11:44:15 发布
最新推荐文章于 2024-05-08 11:44:15 发布
阅读量5.4k 收藏 6
点赞数 1
分类专栏： 【精准打击】 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39078783/article/details/127565720
版权

自使用文本域时,涉及到换行时 ,显示到页面上时并没有换行的效果,其实文本域保存的换行是/r/n 浏览器无法识别这种换行 所以在回显时需要将其替换为浏览器可识别的代码

 解决方案 将 文字内的所有空格 和换行 进行替换即可

 

data.content = '<p>' + data.content.replace(/ /g, '&nbsp;').replace(/\n|\r\n/g, '</p><p>') + '<p>'

鲸渔
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 ...
textarea 换行显示处理
londy_2000的专栏
01-09 427
textarea 换行显示处理
elementui实现input输入框和textarea文本框回车换行
weixin_46820017的博客
08-23 5391
文本框回车换行
vue 文本中的\n 、＜br＞换行显示
最新发布
CC酱写前端的博客
05-08 2246
注意： style中white-sapce: pre-wrap;一、背景： 后端接口返回数据以\n 作为换行符，前端显示时候需要换行显示；二、br 换行（可以使用v-html）三、把br替换成\n换行。
【Element 】vue3 中 Element el-input textarea 回车发送不换行，ctrl+enter 实现换行
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-28 2847
个人样式，可以参考，主要是去掉边框、缩放图标和高度问题。
Vue3+Element Plus框架 Input textaera 换行展示
qq_33422122的博客
04-07 788
console.log(1, 'textaera换行展示', result);let str = 'text,文本,Englist';
Vue v-html指令解析文本并保留换行空格问题
asd2437252087的博客
11-19 1272
被包围在 pre 标签中的文本通常会保留空格和换行符。
vue 中 换行
weixin_42609225的博客
01-06 9729
在 Vue 中要换行，可以使用 <br> 标签。 例如： <template> <div> 这是第一行<br> 这是第二行 </div> </template> 也可以使用 \n 换行。例如： <template> <div> {{ '这是第一行\n这是第二行' }...
vue项目中textarea文本提交到后端数据库，前端输出保存换行回车及修改
海阔天空
09-25 1万+
在提交前先用正则： var content = this.content.replace(/\r\n/g, '&lt;br/&gt;').replace(/\n/g, '&lt;br/&gt;').replace(/\s/g, '&amp;nbsp;'); （此处content为textarea输入值） 展示的时候用下v-html命令就可以了： &lt;p v-html="content"&...
前端插件vue+elementui+axios
03-22
在前端开发领域，Vue.js、Element UI 和 Axios 是三个非常重要的工具，它们分别扮演着不同的角色，共同构建出高效、美观且易于维护的用户界面。接下来，我们将详细探讨这三个技术的知识点。 首先，Vue.js 是一个轻...
textarea框增加行号效果
01-26
为原始的HTML页面中的textarea框加入行号，替代一些复杂的文本编辑器
解决Vue大括号字符换行踩的坑
01-18
最近遇到这样一个问题，在页面上要显示一段自定义的文本，文本如果较长的话需要换行显示。 在HTML中可以通过 标签换行，也可以通过\n转义字符换行 在Vue中用大括号显示的变量，加 会直接被当成字符串显示出来...
线性结构与树形结构相互转换（ES6实现）
liujuyingxiong的博客
11-12 1194
线性结构与树形结构相互转换（ES6实现）线性转树形：树形转线性： 线性转树形： function listConvertTree(list) { let root = null; if (list && list.length) { root = { id: 0, parentId: null, children: [] }; const group = {...
element ui的select选择器collapse-tags属性文本换行
给我一根筷子，我能撬动整个地球
09-27 6943
F12 可以观察到，输入框中显示的两个 Tag 对应了两个 span 标签，当 Tag[1] 的长度过长时，默认的宽度为 max-width，会出现 Tag[1] 文本溢出，Tag[2] 换行。官方给的 collapse-tags 案例是这样的，默认展示第一个选项的 label，更多选项的 label 折叠为一个 Tag。只需要加上下面这段 css 样式就可以达到文本不换行的效果。
关于ElementUI的el-popover的问题：文本换行、修改样式
qq_37764878的博客
08-31 1547
关于ElementUI的el-popover的问题：文本换行、修改样式
实现textarea内换行
热门推荐
夏尔的小酒馆
03-26 7万+
为什么会出现这个问题呢？是因为我在做自己个人网站的留言板时，我想预设好textarea的值，像这样，让用户输入的时候直接另起一行！ 不墨墨唧唧了，直接告诉你们,下面两种方法是没有用的。 1.企图在html里面加上&amp;lt;br /&amp;gt; &amp;lt;textarea cols=&quot;15&quot; rows=&quot;8&quot; id=&quot;Txt&quot;&amp;gt;To
vue2中使用vue-i18n
01-21
在Vue2中使用vue-i18n进行国际化语言的处理，可以按照以下步骤进行： 1. 首先，在项目中安装vue-i18n依赖包。可以使用npm或yarn命令进行安装，如下所示： ```shell $ npm install vue-i18n ``` 或 ```shell $ yarn add vue-i18n ``` 2. 在main.js文件中引入vue-i18n，并将其作为Vue的插件进行注册，如下所示： ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) ``` 3. 创建一个新的VueI18n实例，并配置语言资源。可以在项目中创建一个lang目录，用于存放不同语言的翻译文件。例如，创建一个zh-CN.js文件用于存放中文翻译，内容如下： ```javascript export default { message: { hello: '你好' } } ``` 4. 在main.js文件中创建VueI18n实例，并将语言资源配置到实例中，如下所示： ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' import zhCN from './lang/zh-CN' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh-CN', // 设置默认语言 messages: { 'zh-CN': zhCN // 将中文翻译配置到实例中 } }) new Vue({ i18n, // ... }).$mount('#app') ``` 5. 在Vue组件中使用翻译文本。可以使用`$t`方法来获取翻译后的文本，如下所示： ```html <template> <div> <p>{{ $t('message.hello') }}</p> </div> </template> ``` 以上是在Vue2中使用vue-i18n进行国际化语言处理的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸渔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值