Vue中的文字換行問題
更新時間：2022年09月13日 10:54:55 作者：Boriska1996
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue中數(shù)據(jù)單向綁定的文字換行怎么搞？
兩個關(guān)鍵 /n+white-space: pre-wrap;
換行樣式綁定給需要換行的父元素
Vue文本中的\n 、＜br＞進行換行顯示
效果圖
1.br換行可以使用v-html
<p v-html="info"></p>
data() {
? ?return {
? ? ?activeName: 'first',
? ? ?info: '1、優(yōu)化批量上傳圖片<br/>2、優(yōu)化時間'
? ?}
?},2.\n 換行
?<p style="white-space: pre-wrap;">{{ info }}</p>
?data() {
? ?return {
? ? ?info: '1、優(yōu)化圖片\n2、優(yōu)化時間\n'
? ?}
?},3.把br替換成\n換行
<p style="white-space: pre-wrap;">{{changeLine(info)}}</p>
data(){
?? ?return{
?? ??? ?info: '1、優(yōu)化批量上傳圖片<br/>2、優(yōu)化時間'
?? ?}
},
methods:{
?? ?changeLine(str){
?? ??? ?return str.replace(/<br>/g,'\n')
?? ?}
}補充：點擊查看詳細解釋 white-space
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細代碼
本文分別使用?SFC（模板方式）和?tsx?方式對?Element?Plus?*el-menu*?組件進行二次封裝，實現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動態(tài)渲染菜單，對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09
這篇文章主要為大家詳細介紹了Vue左滑組件slider的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄頁背景粒子特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這個插件可以用來在未使用組件庫,沒有自帶好的校驗規(guī)則時使用,進行表單校驗，非常的實用，感興趣的朋友可以參考下本文，了解該插件的使用方法2021-06-06
Element-Ui組件 NavMenu 導航菜單的具體使用
這篇文章主要介紹了Element-Ui組件 NavMenu 導航菜單的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了el-form 多層級表單的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
啟動項目時遇到ES6的拓展運算符報錯可以通過切換到淘寶鏡像,以及在項目根目錄下新增.babelrc和postcss.config.js文件來解決,這些操作有助于正確配置項目環(huán)境,從而避免報錯,并保證項目的順利運行,希望這些經(jīng)驗能夠幫助到遇到相同問題的開發(fā)者2024-10-10
elementUI Tree 樹形控件單選實現(xiàn)示例
在ElementUI中樹形控件本身不支持單選功能,本文就來介紹一下如何實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
今天小編就為大家分享一篇Vue2.0點擊切換類名改變樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08