vue項目中字符串換行顯示方式(返回的數據包含‘\r\n’字符)
vue項目中字符串換行顯示
在vue項目中，請求後端接口獲取到的數據是一整條字符串，如：‘1、和加速度和環境，\r\n2、技術的進步是否，\r\n3、講述的就是不對’
（數據是隨意的，各位大佬別糾結（~~））
這種格式的文本數據我們希望在界面中展示是換行的， 如下：
- 1、和加速度和環境
- 2、技術的進步是否
- 3、講述的就是不對
但是在vue項目中，數據渲染時無法識別換行符‘\r\n’
處理方法
先定義一個字符串數據
var str = '1、和加速度和環境，\r\n2、技術的進步是否，\r\n3、講述的就是不對'
1、拿到數據先對字符串數據進行處理，使用replace()函數或split().join()方式處理數據；
replace()函數處理方式：
str.replace(/\\r\\n/g, '<br/>')
一波解釋：正則全局檢索‘\r\n’字符，用‘br’標簽替換（用br標簽替換是有原因的，下面解釋）
split()函數處理方式：
split(/\\r\\n/g).join('<br/>')
用split()函數處理，是先檢索‘\r\n’字符切割成數組，我們拿到的數據是arr格式的，arr[0]就是‘1、和加速度和環境，’，因此需要用join()重新拼接並插入‘br’標簽字符。
2、將str數據渲染到組件中：
拿到數據：
var data = str.replace(/\\r\\n/g, '<br/>')
渲染到組件中：
<div v-html="data"></div>
強調！強調！強調！這裡要用v-html！
踩坑記錄（記得抽空瞄一眼，很重要！）
1、關於正則判斷的踩坑：
用正則判定時踩瞭幾個坑，用replace()函數處理時，一種寫法是str.replace(/\r\n/g, ‘’)，這種寫法在Google瀏覽器控制臺中編譯的時候是生效的，但是在vue項目中運行時無效。
因此，需要用比較嚴謹的正則方式，字符串中的\是特殊字符，檢索是需要轉義，在正則中需要轉義的字段要在前面加上斜杠
所以最後需要寫成**/\r\n/g**的格式，/g是正則全局判斷的意思。
2、使用br標簽替換的原因：
後端返回的字符串數據，換行符是**\r\n**，在前端渲染時，會發現，直接將字符串渲染時是無法識別的，有些道友會發現，\n也是可以換行的，比如在標簽中直接渲染字符串。但是在vue項目中，在標簽中使用 {{}} 渲染變量數據時是無法識別換行的。
同樣的，用br標簽替換之後使用 {{}} 渲染變量數據也是無法識別的，因此要用v-html方法替換 {{}} 方法渲染。
vue字符串換行問題及vue路由跳轉傳參
vue 中 用 {{}} 進行數據綁定的時候，如果想讓字符串換行是不會生效，
解決辦法，不用上邊的方式進行數據綁定，用v-html標簽代替{{}}
//table中columns的列對象中引入插槽knTags
columns: [
{
title:'標題',
align:"center",
dataIndex: 'backTag',//渲染的字段
scopedSlots: { customRender: 'knTags' },
ellipsis: true //字數超出顯示省略號
}，
{
...
}]
//knTags插槽中自定義展現的數據
<template slot="knTags" slot-scope="text,record">
//text為表格渲染的字段backTag的數據
//record為動態傳給table渲染的的json本條所有數據
<a v-if="record.remarkContent.trim()==''" v-html="text"></a>
<a v-else :title="'摘要：<br>'+record.remarkContent.trim()">{{text}}</a>
</template>
//假設text的數據
record.text=“第一行<br/>第二行”；
輸出結果：
------------------------------------------------
“第一行<br/>第二行”
------------------------------------------------
第一行
第二行
------------------------------------------------
解決方法 加入 路由a 跳轉到 路由b:
data () {
return {
url: {
lookCaseUrl:"/aaaa/bbbb/ccccc",//項目接口地址
editKnUrl:"aaaa-bbbbb-cccccc"//框架頁面地址
}
}
}
//a頁面路由跳轉b傳參
that.$router.push({
name:that.url.editKnUrl,
params:
{idMedias : info.file.id,
keys : res
}
});
//b頁面的方法中接受路由傳過來的參數
this.$route.params.idMedias
this.$route.params.keys
項目開發過程中遇到的問題！
總結
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。