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