vue文本识别 “ \n ” 的换行问题 和顶部温馨提示实践
在vue项目,有时请求返回的数据res.data中会有含有\n的字符串,如果直接渲染的话无法实现换行。解决方法:一、通过 css属性 实现即:设置 white-space: pre-wrap;,(代码如下):<div style="white-space: pre-wrap;">{{请求返回的含有\n的字符串}}</div>二、使用v-html实现首先,将字符串里的 \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
}
更多推荐
已为社区贡献13条内容
所有评论(0)