最近遇到這樣一個(gè)問(wèn)題，在頁(yè)面上要顯示一段自定義的文本，文本如果較長(zhǎng)的話(huà)需要換行顯示。

在HTML中可以通過(guò)<br/>標(biāo)簽換行，也可以通過(guò)n轉(zhuǎn)義字符換行

在Vue中用大括號(hào)顯示的變量，加<br/>會(huì)直接被當(dāng)成字符串顯示出來(lái)，加n顯示一個(gè)空格，加rn顯示兩個(gè)空格，因?yàn)閧{}}}是文本插值，內(nèi)部都會(huì)按照普通字符串進(jìn)行處理，可以用v-html進(jìn)行顯示

如下顯示name變量

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

在元素上顯示name值

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

補(bǔ)充知識(shí)：使用v-html解決Vue.js渲染過(guò)程中html標(biāo)簽不能被解析（html標(biāo)簽顯示為字符串）

在網(wǎng)頁(yè)中，后臺(tái)傳來(lái)的json數(shù)據(jù)中包含html標(biāo)簽，將該json數(shù)據(jù)綁定到Vue.js中對(duì)象中，對(duì)該對(duì)象進(jìn)行for循環(huán)，發(fā)現(xiàn)數(shù)據(jù)中的html標(biāo)簽不能被解析，而是當(dāng)作字符顯示出來(lái)。

問(wèn)題如下所示：

解決：

Vue.js中提供了v-html這個(gè)指令來(lái)解決這個(gè)問(wèn)題，或者對(duì)數(shù)據(jù)對(duì)象使用{{{vm.data}}}三個(gè)大括號(hào)來(lái)包裹對(duì)象，就可以正常解析了。

代碼改動(dòng)如下：

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

解釋見(jiàn)下圖

以上這篇解決Vue大括號(hào)字符換行踩的坑就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。