解決Vue大括號(hào)字符換行踩的坑
最近遇到這樣一個(gè)問題，在頁(yè)面上要顯示一段自定義的文本，文本如果較長(zhǎng)的話需要換行顯示。
在HTML中可以通過<br/>標(biāo)簽換行，也可以通過\n轉(zhuǎn)義字符換行
在Vue中用大括號(hào)顯示的變量，加<br/>會(huì)直接被當(dāng)成字符串顯示出來，加\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渲染過程中html標(biāo)簽不能被解析（html標(biāo)簽顯示為字符串）
在網(wǎng)頁(yè)中，后臺(tá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)作字符顯示出來。
問題如下所示：
解決：
Vue.js中提供了v-html這個(gè)指令來解決這個(gè)問題，或者對(duì)數(shù)據(jù)對(duì)象使用{{{vm.data}}}三個(gè)大括號(hào)來包裹對(duì)象，就可以正常解析了。
代碼改動(dòng)如下：
此外某些情況下，使用{{{}}}符號(hào)仍然不能解析html標(biāo)簽，但v-htm指令卻可以，可能是Vue.js存在的bug吧。
解釋見下圖
以上這篇解決Vue大括號(hào)字符換行踩的坑就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js頁(yè)面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作
debounce是lodash工具庫(kù)中的一個(gè)非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁(yè)面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue中組件如何使用vue-quill-editor問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例
下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了vue中watch監(jiān)聽不到變化的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
@click.native和@click的區(qū)別及說明
這篇文章主要介紹了@click.native和@click的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
關(guān)于Vue在ie10下空白頁(yè)的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁(yè)的debug相關(guān)資料，這是最近在工作中遇到的一個(gè)問題，通過查找相關(guān)的資料終于解決了，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue中的ref,props,mixin屬性,文章圍繞主題ref,props,mixin展開詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式
這篇文章主要介紹了vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目
這篇文章主要介紹了詳解如何使用vue-cli腳手架搭建Vue.js項(xiàng)目 ,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vueRouter常用屬性,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-12-12