Vue關(guān)于Element UI中的文本域換行問題
Vue Element UI中的文本域換行
1、先在methods中定義一個方法如下：
preText (pretext) {
return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')
},2、提交的時候?qū)⒔壎ǖ闹礳ontent傳遞給preText這個方法進行處理，再賦值給remarks提交給后臺保存到數(shù)據(jù)庫
this.remarks = this.preText(this.content);
3、查看處理后的數(shù)據(jù)情況
可以看到控制臺打印的數(shù)據(jù)多了<br/>這個標(biāo)簽
4、標(biāo)簽渲染的時候再用v-html即可
Vue文本域多行輸入時，逐行獲取，渲染內(nèi)容
我們在進行文本域輸入時，很多情況會涉及到輸入操作步驟，我們希望可以逐行獲取，以數(shù)組形式提交到后端。
當(dāng)然從后端獲取到數(shù)組形式的操作步驟時，可以按照逐行顯示的方法顯示在文本域中，那么具體怎么進行呢？
Step1: 搞清楚我們在文本域中敲擊回車時，發(fā)生了什么
回車=>"\n"
這個想必大家都知道，不然大家也不會涉及到CSDN，所以，
以圖片為例，文本域中的內(nèi)容就可以表示為：“1、aaa\n2、bbb\n3、ccc”這樣一來，
我們只需替換\n為一個常見的分隔符就好，這里用“，”舉例，替換會用到下列自定義函數(shù)
// 多行文本域內(nèi)容逐行獲取
preText(pretext) {
return pretext.replace(/\r\n/g, ",").replace(/\n/g, ",");
},
Step2: \n替換完畢，接下來轉(zhuǎn)換為數(shù)組
這時，我們的“1、aaa\n2、bbb\n3、ccc”就會轉(zhuǎn)變?yōu)?ldquo;1、aaa，2、bbb，3、ccc”到這里，JavaScript學(xué)得不錯的同學(xué)就應(yīng)該都知道該怎么變?yōu)閿?shù)組了。
沒錯，通過JavaScript split() 方法
("1、aaa,2、bbb,3、ccc").split(",");一行代碼搞定！
Step3:字符串轉(zhuǎn)數(shù)組成功，然后該逆過程
我們從后端獲取到數(shù)組形式的操作步驟時，可以按照逐行顯示的方法顯示在文本域中，其實也很簡單，既然轉(zhuǎn)數(shù)組的時候是字符串分割，那么數(shù)組轉(zhuǎn)字符串，數(shù)組拼接不就完了嘛！
我想這時候JavaScript學(xué)得不錯的同學(xué)又應(yīng)該知道該怎么辦了。
JavaScript join() 方法
“怎么樣才能做到換行呢？”
“\n”
“所以，用\n拼接就完了嘛！”
that.TaskInfo.taskcontent = res.data.content.join("\n");又是一行代碼搞定！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對組件進行操作方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue使用v-viewer插件實現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)
v-viewer是一個基于viewerjs封裝的vue圖片預(yù)覽組件,有預(yù)覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化，這篇文章主要介紹了Vue使用v-viewer插件實現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了使用element-ui實現(xiàn)行合并過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3利用自定義指令進行內(nèi)容控制的實現(xiàn)方法
Vue3作為一個漸進式JavaScript框架,提供了強大的自定義指令功能,使得權(quán)限控制變得既簡單又高效,本文將詳細(xì)介紹如何在Vue3中使用自定義指令來判斷內(nèi)容是否顯示,以滿足不同用戶權(quán)限下的界面展示需求,需要的朋友可以參考下2024-04-04
VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))，文中通過圖文表格介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue2.x通過Object.defineProperty()實現(xiàn)響應(yīng)式系統(tǒng),但存在一些限制,如不能檢測新增和刪除的屬性、深層嵌套對象性能開銷大等,Vue3.0引入Proxy,可以更高效地攔截對象操作,解決這些問題2025-02-02
這篇文章主要介紹了Vue 3.0x中的Suspense和異步組件,我們將討論新的defineAsyncComponent函數(shù),以及如何利用Suspense組件來更好地處理異步組件的加載和顯示,需要的朋友可以參考下2023-08-08
讓webpack+vue-cil項目不再自動打開瀏覽器的方法
今天小編就為大家分享一篇讓webpack+vue-cil項目不再自動打開瀏覽器的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了webstorm和.vue中es6語法報錯的解決方法，小編總結(jié)了webstorm和.vue中出現(xiàn)的es6語法報錯，避免大家采坑，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了在vue里添加好看的lottie動畫效果的方法，在vue中引入lottie非常簡單,需要的朋友可以參考下2018-08-08