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-bar
			    v-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.showAll
			this.showAll?this.deptTip=this.deptTip.replace(/\n/g,'<br>'):this.deptTip=this.deptTip2
		}