vue項目中字符串換行顯示的方法有哪些

本篇內容介紹了“vue項目中字符串換行顯示的方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

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