在vue中利用v-html按分號將文本換行的例子
更新時(shí)間：2019年11月14日 10:57:36 作者：米斯特虞
今天小編就為大家分享一篇在vue中利用v-html按分號將文本換行的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近在開發(fā)的時(shí)候遇到這樣一個(gè)需求，需要將一段文本按照分號(有中文分號和英文分號)進(jìn)行換行操作。
如下：
換行前：雷軍,2457.66萬,自然人股東;洪鋒,169.51萬,自然人股東;黎萬強(qiáng),10.33萬,自然人股東;
換行后：
雷軍,2457.66萬,自然人股東;
洪鋒,169.51萬,自然人股東;
黎萬強(qiáng),10.33萬,自然人股東;
顯示的html：
<p class="bgnr-txt" v-html="change(content)">
js：
methods:{
change:function(content){
content = content.replace(/;/g,";</br>");
content = content.replace(/；/g,"；</br>");
return content;
}
},
也可以這樣寫：
methods:{
change:function(content){
var reg = /[;；]/g;
content = content.replace(reg,"$&\r\n");
return content;
}
},
但是在寫的過程中發(fā)現(xiàn)，控制臺輸出顯示已經(jīng)轉(zhuǎn)換成功了，但是在頁面上看到的效果是還沒有轉(zhuǎn)換成功。后來發(fā)現(xiàn)需要在頁面上當(dāng)前標(biāo)簽上加一個(gè)white-space: pre-wrap;的樣式，如下：
<p class="bgnr-txt" style="white-space: pre-wrap;" v-html="change(content)">
至此問題得以解決。
以上這篇在vue中利用v-html按分號將文本換行的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號)沖突問題
這篇文章主要介紹了解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號)沖突問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue如何引入全局過濾器問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中選中多個(gè)選項(xiàng)并且改變選中的樣式的實(shí)例代碼
這篇文章主要介紹了vue中選中多個(gè)選項(xiàng)并且改變選中的樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
vue2.0移動端滑動事件vue-touch的實(shí)例代碼
這篇文章主要介紹了vue2.0移動端滑動事件vue-touch的實(shí)例代碼,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了解決Vue前后端跨域問題的多種方式,本文主要介紹借助解決Vue前后端跨域問題的幾種方式，將會使用axios進(jìn)行請求需要的朋友可以參考下2022-11-11
Vue+Element實(shí)現(xiàn)頁面生成快照截圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Element實(shí)現(xiàn)頁面生成快照截圖功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要為大家講解了vue3?keepalive源碼解析解決線上問題，需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了讓你30分鐘快速掌握vue3，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
有時(shí)候會碰到查詢條件需要用下拉框來區(qū)分的時(shí)候,比如需要區(qū)分全部?|?啟用?|?停用三個(gè)狀態(tài),這時(shí)一般會給全部的value值設(shè)置為'',但是這樣會導(dǎo)致下拉框無法選中對應(yīng)的全部選項(xiàng),本文就來介紹一下這個(gè)問題解決,感興趣的可以了解一下2024-11-11