Vue關(guān)于Element UI中的文本域換行問題
Vue Element UI中的文本域換行
1、先在methods中定義一個(gè)方法如下：
preText (pretext) {
return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')
},2、提交的時(shí)候?qū)⒔壎ǖ闹礳ontent傳遞給preText這個(gè)方法進(jìn)行處理，再賦值給remarks提交給后臺保存到數(shù)據(jù)庫
this.remarks = this.preText(this.content);
3、查看處理后的數(shù)據(jù)情況
可以看到控制臺打印的數(shù)據(jù)多了<br/>這個(gè)標(biāo)簽
4、標(biāo)簽渲染的時(shí)候再用v-html即可
Vue文本域多行輸入時(shí)，逐行獲取，渲染內(nèi)容
我們在進(jìn)行文本域輸入時(shí)，很多情況會涉及到輸入操作步驟，我們希望可以逐行獲取，以數(shù)組形式提交到后端。
當(dāng)然從后端獲取到數(shù)組形式的操作步驟時(shí)，可以按照逐行顯示的方法顯示在文本域中，那么具體怎么進(jìn)行呢？
Step1: 搞清楚我們在文本域中敲擊回車時(shí)，發(fā)生了什么
回車=>"\n"
這個(gè)想必大家都知道，不然大家也不會涉及到CSDN，所以，
以圖片為例，文本域中的內(nèi)容就可以表示為：“1、aaa\n2、bbb\n3、ccc”這樣一來，
我們只需替換\n為一個(gè)常見的分隔符就好，這里用“，”舉例，替換會用到下列自定義函數(shù)
// 多行文本域內(nèi)容逐行獲取
preText(pretext) {
return pretext.replace(/\r\n/g, ",").replace(/\n/g, ",");
},
Step2: \n替換完畢，接下來轉(zhuǎn)換為數(shù)組
這時(shí)，我們的“1、aaa\n2、bbb\n3、ccc”就會轉(zhuǎn)變?yōu)?ldquo;1、aaa，2、bbb，3、ccc”到這里，JavaScript學(xué)得不錯(cuò)的同學(xué)就應(yīng)該都知道該怎么變?yōu)閿?shù)組了。
沒錯(cuò)，通過JavaScript split() 方法
("1、aaa,2、bbb,3、ccc").split(",");一行代碼搞定！
Step3:字符串轉(zhuǎn)數(shù)組成功，然后該逆過程
我們從后端獲取到數(shù)組形式的操作步驟時(shí)，可以按照逐行顯示的方法顯示在文本域中，其實(shí)也很簡單，既然轉(zhuǎn)數(shù)組的時(shí)候是字符串分割，那么數(shù)組轉(zhuǎn)字符串，數(shù)組拼接不就完了嘛！
我想這時(shí)候JavaScript學(xué)得不錯(cuò)的同學(xué)又應(yīng)該知道該怎么辦了。
JavaScript join() 方法
“怎么樣才能做到換行呢？”
“\n”
“所以，用\n拼接就完了嘛！”
that.TaskInfo.taskcontent = res.data.content.join("\n");又是一行代碼搞定！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue單元測試case寫法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了詳解Vue如何支持JSX語法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
keep-alive include和exclude無效問題及解決
這篇文章主要介紹了keep-alive include和exclude無效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue?頂部消息橫向滾動(dòng)通知效果實(shí)現(xiàn)
系統(tǒng)頂部展示一個(gè)橫向滾動(dòng)的消息通知,就是消息內(nèi)容從右往左一直滾動(dòng),這篇文章主要介紹了vue頂部消息橫向滾動(dòng)通知,需要的朋友可以參考下2024-02-02
解決VUE-Router 同一頁面第二次進(jìn)入不刷新的問題
這篇文章主要介紹了解決VUE-Router 同一頁面第二次進(jìn)入不刷新的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue項(xiàng)目啟動(dòng)時(shí)無法識別es6的擴(kuò)展語法的解決
啟動(dòng)項(xiàng)目時(shí)遇到ES6的拓展運(yùn)算符報(bào)錯(cuò)可以通過切換到淘寶鏡像,以及在項(xiàng)目根目錄下新增.babelrc和postcss.config.js文件來解決,這些操作有助于正確配置項(xiàng)目環(huán)境,從而避免報(bào)錯(cuò),并保證項(xiàng)目的順利運(yùn)行,希望這些經(jīng)驗(yàn)?zāi)軌驇椭接龅较嗤瑔栴}的開發(fā)者2024-10-10
Vuejs中的watch實(shí)例詳解(監(jiān)聽者)
本文通過實(shí)例代碼給大家介紹了Vuejs中的watch，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-01-01
基于vue3&element-plus的暗黑模式實(shí)例詳解
實(shí)現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
typescript+vite項(xiàng)目配置別名的方法實(shí)現(xiàn)
我們?yōu)榱耸÷匀唛L的路徑，經(jīng)常喜歡配置路徑別名，本文主要介紹了typescript+vite項(xiàng)目配置別名的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本文主要介紹了使用PM2運(yùn)行Vue項(xiàng)目的具體步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11