在vue中利用v-html按分號(hào)將文本換行的例子
最近在開(kāi)發(fā)的時(shí)候遇到這樣一個(gè)需求，需要將一段文本按照分號(hào)(有中文分號(hào)和英文分號(hào))進(jìn)行換行操作。
如下：
換行前：雷軍,2457.66萬(wàn),自然人股東;洪鋒,169.51萬(wàn),自然人股東;黎萬(wàn)強(qiáng),10.33萬(wàn),自然人股東;
換行后：
雷軍,2457.66萬(wàn),自然人股東;
洪鋒,169.51萬(wàn),自然人股東;
黎萬(wàn)強(qiáng),10.33萬(wàn),自然人股東;
顯示的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;
}
},
但是在寫的過(guò)程中發(fā)現(xiàn)，控制臺(tái)輸出顯示已經(jīng)轉(zhuǎn)換成功了，但是在頁(yè)面上看到的效果是還沒(méi)有轉(zhuǎn)換成功。后來(lái)發(fā)現(xiàn)需要在頁(yè)面上當(dāng)前標(biāo)簽上加一個(gè)white-space: pre-wrap;的樣式，如下：
<p class="bgnr-txt" style="white-space: pre-wrap;" v-html="change(content)">
至此問(wèn)題得以解決。
以上這篇在vue中利用v-html按分號(hào)將文本換行的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中,有兩種類型的自定義指令：局部指令和全局指令,但是除了這些指令?Vue也允許我們自己定義自己的指令,下面我們就來(lái)學(xué)習(xí)一下Vue中自定義指令的用法吧2023-08-08
Vue組件渲染與更新實(shí)現(xiàn)過(guò)程淺析
這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-03-03
Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)
這篇文章主要介紹了Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了解決vue頁(yè)面渲染但dom沒(méi)渲染的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁(yè)面的數(shù)據(jù)，帶樣式，也就是說(shuō)好看點(diǎn)顯示,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue使用iframe實(shí)現(xiàn)瀏覽器打印兼容性優(yōu)化
在前端開(kāi)發(fā)中,打印功能是一個(gè)常見(jiàn)的需求,但不同瀏覽器對(duì)打印樣式的支持差異較大,本文我們來(lái)看看Vue如何使用iframe實(shí)現(xiàn)瀏覽器打印兼容性優(yōu)化吧2025-04-04
Vue.sync修飾符與$emit(update:xxx)詳解
這篇文章主要介紹了Vue.sync修飾符與$emit(update:xxx),實(shí)現(xiàn)思路非常簡(jiǎn)單，文章介紹了.sync修飾符的作用和使用.sync修飾符的寫法，實(shí)現(xiàn)代碼簡(jiǎn)單易懂對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
Vue中設(shè)置el-select的高度不生效問(wèn)題及解決方案
文章介紹了如何使用ElementUI框架中的el-select組件,并解決設(shè)置其高度不生效的問(wèn)題,在Vue2.x中,使用/deep/關(guān)鍵字可以穿透組件作用域修改樣式；在Vue2.6+到Vue3初期,推薦使用::v-deep關(guān)鍵字；在最新的Vue3和構(gòu)建工具中,推薦使用:deep()偽類來(lái)代替::v-deep2025-01-01
基于vue.js組件實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了基于vue.js組件實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12