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