vue項目中字符串換行顯示

在vue項目中，請求后端接口獲取到的數(shù)據(jù)是一整條字符串，如：‘1、和加速度和環(huán)境，\r\n2、技術的進步是否，\r\n3、講述的就是不對’

（數(shù)據(jù)是隨意的，各位大佬別糾結（~~））

這種格式的文本數(shù)據(jù)我們希望在界面中展示是換行的， 如下：

• 1、和加速度和環(huán)境
• 2、技術的進步是否
• 3、講述的就是不對

但是在vue項目中，數(shù)據(jù)渲染時無法識別換行符‘\r\n’

處理方法

先定義一個字符串數(shù)據(jù)

var str = '1、和加速度和環(huán)境，\r\n2、技術的進步是否，\r\n3、講述的就是不對'

1、拿到數(shù)據(jù)先對字符串數(shù)據(jù)進行處理，使用replace()函數(shù)或split().join()方式處理數(shù)據(jù)； 

replace()函數(shù)處理方式：

str.replace(/\\r\\n/g, '<br/>')

一波解釋：正則全局檢索‘\r\n’字符，用‘br’標簽替換（用br標簽替換是有原因的，下面解釋） 

split()函數(shù)處理方式：

split(/\\r\\n/g).join('<br/>')

用split()函數(shù)處理，是先檢索‘\r\n’字符切割成數(shù)組，我們拿到的數(shù)據(jù)是arr格式的，arr[0]就是‘1、和加速度和環(huán)境，’，因此需要用join()重新拼接并插入‘br’標簽字符。

2、將str數(shù)據(jù)渲染到組件中：

拿到數(shù)據(jù)：

var data = str.replace(/\\r\\n/g, '<br/>')

渲染到組件中：

<div v-html="data"></div>

強調！強調！強調！這里要用v-html！

踩坑記錄（記得抽空瞄一眼，很重要！） 

1、關于正則判斷的踩坑：

用正則判定時踩了幾個坑，用replace()函數(shù)處理時，一種寫法是str.replace(/\r\n/g, ‘’)，這種寫法在Google瀏覽器控制臺中編譯的時候是生效的，但是在vue項目中運行時無效。

因此，需要用比較嚴謹?shù)恼齽t方式，字符串中的\是特殊字符，檢索是需要轉義，在正則中需要轉義的字段要在前面加上斜杠

所以最后需要寫成**/\r\n/g**的格式，/g是正則全局判斷的意思。

2、使用br標簽替換的原因：

后端返回的字符串數(shù)據(jù)，換行符是**\r\n**，在前端渲染時，會發(fā)現(xiàn)，直接將字符串渲染時是無法識別的，有些道友會發(fā)現(xiàn)，\n也是可以換行的，比如在標簽中直接渲染字符串。但是在vue項目中，在標簽中使用 {{}} 渲染變量數(shù)據(jù)時是無法識別換行的。

同樣的，用br標簽替換之后使用 {{}} 渲染變量數(shù)據(jù)也是無法識別的，因此要用v-html方法替換 {{}} 方法渲染。

vue字符串換行問題及vue路由跳轉傳參

vue 中 用 {{}} 進行數(shù)據(jù)綁定的時候，如果想讓字符串換行是不會生效，

解決辦法，不用上邊的方式進行數(shù)據(jù)綁定，用v-html標簽代替{{}}

//table中columns的列對象中引入插槽knTags
columns: [
?? ?{
?? ??? ?title:'標題',
?? ??? ?align:"center",
?? ??? ?dataIndex: 'backTag',//渲染的字段
?? ??? ?scopedSlots: { customRender: 'knTags' },
?? ??? ?ellipsis: true //字數(shù)超出顯示省略號
?? ?}，
?? ?{
?? ?...
?? ?}]

//knTags插槽中自定義展現(xiàn)的數(shù)據(jù)
<template slot="knTags" slot-scope="text,record">
//text為表格渲染的字段backTag的數(shù)據(jù)
//record為動態(tài)傳給table渲染的的json本條所有數(shù)據(jù)
<a v-if="record.remarkContent.trim()==''" v-html="text"></a>
<a v-else :title="'摘要：<br>'+record.remarkContent.trim()">{{text}}</a>
</template>

//假設text的數(shù)據(jù)
record.text=“第一行<br/>第二行”；

輸出結果：
------------------------------------------------
“第一行<br/>第二行”
------------------------------------------------
第一行
第二行
------------------------------------------------

解決方法 加入 路由a 跳轉到 路由b:

?data () {
? ? return {
? ? ? url: {
? ? ? ?? ? ?lookCaseUrl:"/aaaa/bbbb/ccccc",//項目接口地址
? ? ? ? ?editKnUrl:"aaaa-bbbbb-cccccc"http://框架頁面地址
? ? ? ?}
? ? ?}
? ? }

//a頁面路由跳轉b傳參
that.$router.push({
?? ?name:that.url.editKnUrl,
?? ?params:
?? ??? ?{idMedias : info.file.id,
?? ? ?? ? keys ? ? : res
?? ? }
});

//b頁面的方法中接受路由傳過來的參數(shù)
this.$route.params.idMedias?
this.$route.params.keys

項目開發(fā)過程中遇到的問題！ 

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論