鍍金池/ 問(wèn)答/HTML/ vue獲取到了后端數(shù)據(jù),如何給其換行?

vue獲取到了后端數(shù)據(jù),如何給其換行?

圖片描述

已獲取到數(shù)據(jù)并在頁(yè)面上顯示,但是是一段文字效果,想問(wèn)下,如何才能給文字換行?
圖片描述

HTML 代碼
圖片描述

獲取后端數(shù)據(jù)代碼

回答
編輯回答
無(wú)標(biāo)題

一整個(gè)字符串是換行是不可控的,達(dá)不到預(yù)期效果,只能像上面兩位大佬說(shuō)的,在js要先轉(zhuǎn)成數(shù)組:

給你的jobsdetail添加個(gè)數(shù)組,拿到j(luò)obsdetail值后做個(gè)處理
....
this.jobsdetail=dataA
this.jobsdetail.PostDutiesArr=dataA.PostDuties.replace(/\s\d/g,v=>{return '$'+v}).split('$ ')
.....

頁(yè)面上寫(xiě)成
....
<p v-for='it in item.PostDutiesArr'>{{it}}</p>
....
2018年4月29日 21:33
編輯回答
舊酒館

可以將字符串先join(“;”)轉(zhuǎn)化為數(shù)組
然后拿數(shù)組去自己排吧

2017年9月30日 12:25
編輯回答
空白格

如果格式都是固定的,前端可以根據(jù)每句話后面的;拆分為數(shù)組,然后進(jìn)行遍歷

2018年4月1日 18:34
編輯回答
兔寶寶

將后臺(tái)返回的數(shù)據(jù)進(jìn)行分解,組裝。

2018年1月14日 11:31
編輯回答
孤巷

應(yīng)該使用類似nl2br的方案,vue使用v-html來(lái)渲染即可。

基本原則就是所見(jiàn)所得吧,后臺(tái)錄入的地方,錄成什么樣,前端就渲染成什么樣

2018年6月23日 03:30
編輯回答
奧特蛋

應(yīng)該讓后端返回一個(gè)list,然后前端遍歷,用p標(biāo)簽就可以

2018年7月15日 07:28
編輯回答
離觴

按 ; 號(hào) 分割完成業(yè)務(wù)需求就是了,

如果讓后端給,估計(jì)格式這樣~

["aaaaaaaaaaaaa", "bbbbbbbbbbbbbb", "ccccccccccccccc"]
2018年3月9日 20:43
編輯回答
筱饞貓

根據(jù)分號(hào)轉(zhuǎn)成數(shù)組;然后再循環(huán)數(shù)組,填充到標(biāo)簽中 比如 data return 里面定義個(gè)arr
let list='1.你好嗎;2.你是誰(shuí);3.你在呢'
this.arr=list.split(';')
<span v-for='item of arr'>{{item}}</span>
即可

2018年8月25日 01:23
編輯回答
情已空

目測(cè)后臺(tái)數(shù)據(jù)是textrea保存的數(shù)據(jù),只需要正則匹配一下,加入換行和空格就好啦,很簡(jiǎn)單

    textareaTo(str) {
        let regs = new RegExp("\r", "g");
        let reg = new RegExp("\n", "g");
        let regSpace = new RegExp(" ", "g");
        str = str.replace(reg, "<br/>");
        str = str.replace(regs, "<br/>");
        str = str.replace(regSpace, "&nbsp;");
        return str;
    },
2018年3月15日 19:27
編輯回答
來(lái)守候

看問(wèn)題里面的展示,可以初步判斷這是一個(gè)textarea框提交的東西,前端只需要保持提交時(shí)候的換行樣式而已;
就是一個(gè)replace(/[\r\n]/g,'<br>')的問(wèn)題,這種事前端做不了?
干什么都讓后端給你處理好,你做個(gè)純展示,還想提升前端薪資?
就這題來(lái)說(shuō),VUE加個(gè)過(guò)濾器,多簡(jiǎn)單的事。

2017年3月31日 12:05