textarea 换行和空格 传值问题

有两种写法

data

duty: ' ',  //textarea输入框
textDuty:[], //展示数据

第一种 (v-html绑定)

template

<el-input  v-model="duty" type="textarea" placeholder="请输入机构职责内容" />
<div v-html="textDuty" style="text-indent:2em;"></div>

script

 let arr = [];
 this.form.duty.split('\n').forEach(item=>arr.push(`<p>${item.trim()}</p>`));
 this.textDuty = arr.join('');

第二种 (v-for循环)

template

<el-input  v-model="duty" type="textarea" placeholder="请输入机构职责内容" />
<div v-for="(item,index) in textDuty" :key="index" style="text-indent:2em;">{{item}}</div>

script

 let arr = []
 this.form.duty.split('\n').forEach(item=>arr.push(`${item.trim()}`))
 this.textDuty = arr;

推荐使用第（二）种，这样的话，可以直接给后端传一个数组