Vue中的文字換行問題
更新時(shí)間：2022年09月13日 10:54:55 作者：Boriska1996
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue中數(shù)據(jù)單向綁定的文字換行怎么搞？
兩個(gè)關(guān)鍵 /n+white-space: pre-wrap;
換行樣式綁定給需要換行的父元素
Vue文本中的\n 、＜br＞進(jìn)行換行顯示
效果圖
1.br換行可以使用v-html
<p v-html="info"></p>
data() {
? ?return {
? ? ?activeName: 'first',
? ? ?info: '1、優(yōu)化批量上傳圖片<br/>2、優(yōu)化時(shí)間'
? ?}
?},2.\n 換行
?<p style="white-space: pre-wrap;">{{ info }}</p>
?data() {
? ?return {
? ? ?info: '1、優(yōu)化圖片\n2、優(yōu)化時(shí)間\n'
? ?}
?},3.把br替換成\n換行
<p style="white-space: pre-wrap;">{{changeLine(info)}}</p>
data(){
?? ?return{
?? ??? ?info: '1、優(yōu)化批量上傳圖片<br/>2、優(yōu)化時(shí)間'
?? ?}
},
methods:{
?? ?changeLine(str){
?? ??? ?return str.replace(/<br>/g,'\n')
?? ?}
}補(bǔ)充：點(diǎn)擊查看詳細(xì)解釋 white-space
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
這篇文章主要介紹了vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了uni-app 的模板語法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
vue3配置代理實(shí)現(xiàn)axios請(qǐng)求本地接口返回PG庫數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue3配置代理實(shí)現(xiàn)axios請(qǐng)求本地接口返回PG庫數(shù)據(jù)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-03-03
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出報(bào)表至excel表格的三種方式,導(dǎo)出報(bào)表是實(shí)際開發(fā)的常見功能,前后端都可以實(shí)現(xiàn)表格導(dǎo)出,本文介紹的是用vue實(shí)現(xiàn),需要的朋友可以參考下2023-09-09
<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接
這篇文章主要介紹了<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問題及解決
這篇文章主要介紹了Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了關(guān)于TypeScript的踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
最近需要做一個(gè)el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11