在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中,有兩種類型的自定義指令：局部指令和全局指令,但是除了這些指令?Vue也允許我們自己定義自己的指令,下面我們就來學習一下Vue中自定義指令的用法吧2023-08-08
這篇文章主要介紹了Vue組件渲染與更新實現(xiàn)過程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-03-03
Vue實現(xiàn)渲染數(shù)據(jù)后控制滾動條位置(推薦)
這篇文章主要介紹了Vue實現(xiàn)渲染數(shù)據(jù)后控制滾動條位置，本文通過圖文并茂的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁面的數(shù)據(jù)，帶樣式，也就是說好看點顯示,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家詳細介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Vue使用iframe實現(xiàn)瀏覽器打印兼容性優(yōu)化
在前端開發(fā)中,打印功能是一個常見的需求,但不同瀏覽器對打印樣式的支持差異較大,本文我們來看看Vue如何使用iframe實現(xiàn)瀏覽器打印兼容性優(yōu)化吧2025-04-04
Vue.sync修飾符與$emit(update:xxx)詳解
這篇文章主要介紹了Vue.sync修飾符與$emit(update:xxx),實現(xiàn)思路非常簡單，文章介紹了.sync修飾符的作用和使用.sync修飾符的寫法，實現(xiàn)代碼簡單易懂對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
文章介紹了如何使用ElementUI框架中的el-select組件,并解決設置其高度不生效的問題,在Vue2.x中,使用/deep/關鍵字可以穿透組件作用域修改樣式；在Vue2.6+到Vue3初期,推薦使用::v-deep關鍵字；在最新的Vue3和構建工具中,推薦使用:deep()偽類來代替::v-deep2025-01-01
這篇文章主要為大家詳細介紹了基于vue.js組件實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12