最近遇到這樣一個問題，在頁面上要顯示一段自定義的文字，文字如果較長的話需要換行顯示。

在HTML中可以通過<br/>標籤換行，也可以通過\n轉義字元換行

在Vue中用大括號顯示的變數，加<br/>會直接被當成字串顯示出來，加\n顯示一個空格，加\r\n顯示兩個空格，因為{{}}}是文字插值，內部都會按照普通字串進行處理，可以用v-html進行顯示

如下顯示name變數

data() {
  return{
   name: '前一部分<br/>後一部分'
  }
}

在元素上顯示name值

<p v-html="name"></p>

補充知識：使用v-html解決Vue.js渲染過程中html標籤不能被解析（html標籤顯示為字串）

在網頁中，後臺傳來的json資料中包含html標籤，將該json資料繫結到Vue.js中物件中，對該物件進行for迴圈，發現數據中的html標籤不能被解析，而是當作字元顯示出來。

問題如下所示：

解決：

Vue.js中提供了v-html這個指令來解決這個問題，或者對資料物件使用{{{vm.data}}}三個大括號來包裹物件，就可以正常解析了。

程式碼改動如下：

此外某些情況下，使用{{{}}}符號仍然不能解析html標籤，但v-htm指令卻可以，可能是Vue.js存在的bug吧。

解釋見下圖

以上這篇解決Vue大括號字元換行踩的坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。