vue項(xiàng)目中字符串換行顯示的方法有哪些

本篇內(nèi)容介紹了“vue項(xiàng)目中字符串換行顯示的方法有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

vue項(xiàng)目中字符串換行顯示

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

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

• 1、和加速度和環(huán)境

• 2、技術(shù)的進(jìn)步是否

• 3、講述的就是不對(duì)

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

處理方法

先定義一個(gè)字符串?dāng)?shù)據(jù)

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

1、拿到數(shù)據(jù)先對(duì)字符串?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！

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

1、關(guān)于正則判斷的踩坑：

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

因此，需要用比較嚴(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í)，會(huì)發(fā)現(xiàn)，直接將字符串渲染時(shí)是無(wú)法識(shí)別的，有些道友會(huì)發(fā)現(xiàn)，\n也是可以換行的，比如在標(biāo)簽中直接渲染字符串。但是在vue項(xiàng)目中，在標(biāo)簽中使用 {{}} 渲染變量數(shù)據(jù)時(shí)是無(wú)法識(shí)別換行的。

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

vue字符串換行問(wèn)題及vue路由跳轉(zhuǎn)傳參

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

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

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

//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"//框架頁(yè)面地址
       }
     }
    }

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

//b頁(yè)面的方法中接受路由傳過(guò)來(lái)的參數(shù)
this.$route.params.idMedias 
this.$route.params.keys

“vue項(xiàng)目中字符串換行顯示的方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！