vue項(xiàng)目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)
vue項(xiàng)目中字符串換行顯示
在vue項(xiàng)目中,請求后端接口獲取到的數(shù)據(jù)是一整條字符串,如:‘1、和加速度和環(huán)境,\r\n2、技術(shù)的進(jìn)步是否,\r\n3、講述的就是不對’
(數(shù)據(jù)是隨意的,各位大佬別糾結(jié)(~~))
這種格式的文本數(shù)據(jù)我們希望在界面中展示是換行的, 如下:
- 1、和加速度和環(huán)境
- 2、技術(shù)的進(jìn)步是否
- 3、講述的就是不對
但是在vue項(xiàng)目中,數(shù)據(jù)渲染時(shí)無法識別換行符‘\r\n’
處理方法
先定義一個(gè)字符串?dāng)?shù)據(jù)
var str = '1、和加速度和環(huán)境,\r\n2、技術(shù)的進(jìn)步是否,\r\n3、講述的就是不對'
1、拿到數(shù)據(jù)先對字符串?dāng)?shù)據(jù)進(jìn)行處理,使用replace()函數(shù)或split().join()方式處理數(shù)據(jù);
replace()函數(shù)處理方式:
str.replace(/\\r\\n/g, '<br/>')
一波解釋:正則全局檢索‘\r\n’字符,用‘br’標(biāo)簽替換(用br標(biāo)簽替換是有原因的,下面解釋)
split()函數(shù)處理方式:
split(/\\r\\n/g).join('<br/>')
用split()函數(shù)處理,是先檢索‘\r\n’字符切割成數(shù)組,我們拿到的數(shù)據(jù)是arr格式的,arr[0]就是‘1、和加速度和環(huán)境,’,因此需要用join()重新拼接并插入‘br’標(biāo)簽字符。
2、將str數(shù)據(jù)渲染到組件中:
拿到數(shù)據(jù):
var data = str.replace(/\\r\\n/g, '<br/>')
渲染到組件中:
<div v-html="data"></div>
強(qiáng)調(diào)!強(qiáng)調(diào)!強(qiáng)調(diào)!這里要用v-html!
踩坑記錄(記得抽空瞄一眼,很重要?。?nbsp;
1、關(guān)于正則判斷的踩坑:
用正則判定時(shí)踩了幾個(gè)坑,用replace()函數(shù)處理時(shí),一種寫法是str.replace(/\r\n/g, ‘’),這種寫法在Google瀏覽器控制臺中編譯的時(shí)候是生效的,但是在vue項(xiàng)目中運(yùn)行時(shí)無效。
因此,需要用比較嚴(yán)謹(jǐn)?shù)恼齽t方式,字符串中的\是特殊字符,檢索是需要轉(zhuǎn)義,在正則中需要轉(zhuǎn)義的字段要在前面加上斜杠
所以最后需要寫成**/\r\n/g**的格式,/g是正則全局判斷的意思。
2、使用br標(biāo)簽替換的原因:
后端返回的字符串?dāng)?shù)據(jù),換行符是**\r\n**,在前端渲染時(shí),會發(fā)現(xiàn),直接將字符串渲染時(shí)是無法識別的,有些道友會發(fā)現(xiàn),\n也是可以換行的,比如在標(biāo)簽中直接渲染字符串。但是在vue項(xiàng)目中,在標(biāo)簽中使用 {{}} 渲染變量數(shù)據(jù)時(shí)是無法識別換行的。
同樣的,用br標(biāo)簽替換之后使用 {{}} 渲染變量數(shù)據(jù)也是無法識別的,因此要用v-html方法替換 {{}} 方法渲染。
vue字符串換行問題及vue路由跳轉(zhuǎn)傳參
vue 中 用 {{}} 進(jìn)行數(shù)據(jù)綁定的時(shí)候,如果想讓字符串換行是不會生效,
解決辦法,不用上邊的方式進(jìn)行數(shù)據(jù)綁定,用v-html標(biāo)簽代替{{}}
//table中columns的列對象中引入插槽knTags columns: [ ?? ?{ ?? ??? ?title:'標(biāo)題', ?? ??? ?align:"center", ?? ??? ?dataIndex: 'backTag',//渲染的字段 ?? ??? ?scopedSlots: { customRender: 'knTags' }, ?? ??? ?ellipsis: true //字?jǐn)?shù)超出顯示省略號 ?? ?}, ?? ?{ ?? ?... ?? ?}]
//knTags插槽中自定義展現(xiàn)的數(shù)據(jù) <template slot="knTags" slot-scope="text,record"> //text為表格渲染的字段backTag的數(shù)據(jù) //record為動(dòng)態(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> //假設(shè)text的數(shù)據(jù) record.text=“第一行<br/>第二行”; 輸出結(jié)果: ------------------------------------------------ “第一行<br/>第二行” ------------------------------------------------ 第一行 第二行 ------------------------------------------------
解決方法 加入 路由a 跳轉(zhuǎn)到 路由b:
?data () { ? ? return { ? ? ? url: { ? ? ? ?? ? ?lookCaseUrl:"/aaaa/bbbb/ccccc",//項(xiàng)目接口地址 ? ? ? ? ?editKnUrl:"aaaa-bbbbb-cccccc"http://框架頁面地址 ? ? ? ?} ? ? ?} ? ? } //a頁面路由跳轉(zhuǎn)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
項(xiàng)目開發(fā)過程中遇到的問題!
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue面試??贾甤omputed是如何實(shí)現(xiàn)的
對于每天都在用的計(jì)算屬性(computed),小編猜大家肯定也想窺探其奧妙與原理對吧,所以這篇文章就來講講computed是如何實(shí)現(xiàn)的吧,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08Vue3項(xiàng)目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權(quán)機(jī)制獲取用戶的基本信息,進(jìn)而實(shí)現(xiàn)所需要的業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的相關(guān)資料,需要的朋友可以參考下2021-09-09vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取
這篇文章主要介紹了vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08基于Ant-design-vue的Modal彈窗 封裝 命令式與Hooks用法
這篇文章主要給大家介紹了基于Ant-design-vue的Modal彈窗封裝命令式與Hooks用法,文中有詳細(xì)的代碼示例,具有一定的參考價(jià)值,感興趣的同學(xué)可以借鑒閱讀2023-06-06vuex?mutation?action同級調(diào)用方式
這篇文章主要介紹了vuex?mutation?action同級調(diào)用方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue cli3 調(diào)用百度翻譯API翻譯頁面的實(shí)現(xiàn)示例
這篇文章主要介紹了vue cli3 調(diào)用百度翻譯API翻譯頁面的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09