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