vue文本识别 “ \n ” 的换行问题和顶部温馨提示实践

在 vue 项目，有时请求返回的数据 res.data 中会有含有 \n 的字符串，如果直接渲染的话无法实现换行。

解决方法：
一、通过 css属性实现
即：设置 white-space: pre-wrap;，（代码如下）：

<div style="white-space: pre-wrap;">{{请求返回的含有\n的字符串}}</div>

二、使用v-html实现
首先，将字符串里的 \n 替换为 <br>，然后用 v-html 指令渲染字符串为 innerHTML 。
部分代码如下：

// JS部分
this.text = res.data.replace(/\n/g,'<br>')// HTML部分
<div v-html="text"></div>

下面来个需要用到的实践模块，温馨提示基于vant改造

效果图：并且点击黄色部分会进行伸缩

html部分
<div><!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 --><van-notice-barv-if="deptTip"background="#FFFBE8":scrollable="false"wrapable><div @click="showAllFn" v-cloak id="showAllclamp2" :class="[showAll?'':'clamp2']"><van-icon style="float: left;line-height: 24px;padding-right: 7px;" name="volume-o" ></van-icon><div id="deptTip" v-html="deptTip"></div></div><template v-slot:right-icon><van-icon  style="position: absolute;right: 5px;bottom: 10px;" :name="icon" ></van-icon></template></van-notice-bar></div>

css部分
.clamp2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}


js 部分
隐藏和展示的时候
showAllFn(){this.showAll=!this.showAllthis.showAll?this.deptTip=this.deptTip.replace(/\n/g,'<br>'):this.deptTip=this.deptTip2}

vue文本识别 “ \n ” 的换行问题和顶部温馨提示实践相关推荐

解决：vue文本识别 “ \n ” 的换行问题（完整案例说明）
文章目录 vue文本识别 " \n " 的换行问题:(完整案例说明) 一.需求场景: 二.效果图对比: 三.实现方法: 1:通过 `css属性`实现 2:使用`v-html`实现 ...
vue文本识别 “ \n ” 的换行问题
在 vue 项目,有时请求返回的数据中会有含有 \n 的字符串,如果直接渲染的话无法实现换行. 一.通过 css属性实现设置 white-space: pre-wrap; 代码如下: < ...
linux记事本的文本换到win10 换行失效的问题
win10记事本右下角应该是显示跟linux的文本记事本不太一样 linux的是其中换行符什么的编码不太一样所以某些系统如win server 读到unix的记事本文本会直接全部换行失效但是w ...
unity学习笔记-text文本识别html富文本(待改进)
unity学习笔记 text文本识别html富文本(待改进) 需求逻辑实现 xlua的安装配置到unity 使用改进优化(待改进) text文本识别html富文本(待改进) 需求项目里需要将 ...
vue 文本显示组件_一个Vue组件，可在您键入时突出显示文本
vue 文本显示组件 Vue高亮输入 (Vue Highlightable Input) Highlight and style specific words as you're typing. 键入 ...
AAAI 2020 | 华南理工：面向文本识别的去耦注意力网络
2020-01-15 06:12:12 作者 | 王天玮编辑 | 十.年本文对华南理工大学和联想研究院共同完成,被AAAI-20录用的论文<Decoupled Attention Netwo ...
DL之CNN：基于CNN-RNN(GRU,2)算法(keras+tensorflow)实现不定长文本识别
DL之CNN:基于CNN-RNN(GRU,2)算法(keras+tensorflow)实现不定长文本识别目录输出结果实现代码输出结果后期更新-- 实现代码后期更新-- image_ocr代 ...
python怎么实现输入多行文字_介绍一个Python 包，几行代码可实现 OCR 文本识别！...
点击上方 Z先生点记,加为星标第一时间收到 Python 技术干货! 文字 OCR 识别技术现在已经相当成熟了,无论其准确度还是识别速度都能够满足我们的日常需要:今天给大家介绍一个 Pytho ...
人工智能学习--文本识别实践-tesseract-ocr
前提假设: 1. 所要检测的图片是纯文本或者文字,最好是只有一行: 或者截图只有一行文本的图片.如下图图片名称: text03.jpg 2. 从文本检测(深度学习网络)软件检测到的包含文本区域的图 ...

vue文本识别 “ \n ” 的换行问题和顶部温馨提示实践

vue文本识别 “ \n ” 的换行问题和顶部温馨提示实践相关推荐

最新文章

热门文章

vue文本识别 “ \n ” 的换行问题 和顶部温馨提示实践

vue文本识别 “ \n ” 的换行问题 和顶部温馨提示实践相关推荐

最新文章

热门文章

vue文本识别 “ \n ” 的换行问题和顶部温馨提示实践

vue文本识别 “ \n ” 的换行问题和顶部温馨提示实践相关推荐