解決Vue大括號(hào)字符換行踩的坑
最近遇到這樣一個(gè)問(wèn)題，在頁(yè)面上要顯示一段自定義的文本，文本如果較長(zhǎng)的話需要換行顯示。
在HTML中可以通過(guò)<br/>標(biāo)簽換行，也可以通過(guò)\n轉(zhuǎn)義字符換行
在Vue中用大括號(hào)顯示的變量，加<br/>會(huì)直接被當(dāng)成字符串顯示出來(lái)，加\n顯示一個(gè)空格，加\r\n顯示兩個(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何正確解決VuePress本地訪問(wèn)出現(xiàn)資源報(bào)錯(cuò)404的問(wèn)題
這篇文章主要介紹了如何正確解決VuePress本地訪問(wèn)出現(xiàn)資源報(bào)錯(cuò)404的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue 使用外部JS與調(diào)用原生API操作,結(jié)合實(shí)例形式分析了vue.js調(diào)用外部JS與原生API相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2019-12-12
vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零)
這篇文章主要介紹了vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue中使用Printjs插件實(shí)現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無(wú)需離開(kāi)界面，也無(wú)需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實(shí)現(xiàn)打印功能,需要的朋友可以參考下2022-08-08
Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案
vue3出來(lái)一段時(shí)間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于Vue3+Element-plus項(xiàng)目自動(dòng)導(dǎo)入報(bào)錯(cuò)的解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁(yè)面到指定位置的功能(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁(yè)面到指定位置的功能(推薦),步驟一是是通過(guò)獲取不同板塊的滾輪高度,步驟二通過(guò)編寫(xiě)執(zhí)行滾動(dòng)操作的函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
vue中有一個(gè)很神奇的東西叫v-model，它可以完成我們的需求。，本文重點(diǎn)給大家介紹vue中使用v-model完成組件間的通信,需要的朋友可以參考下2019-08-08
日常開(kāi)發(fā)中除了直接在input標(biāo)簽上使用v-model指令外,封裝的組件也需要v-model,下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件中v-model使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Vue生產(chǎn)環(huán)境如何自動(dòng)屏蔽console
這篇文章主要介紹了Vue生產(chǎn)環(huán)境如何自動(dòng)屏蔽console問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06