应用需求：在textarea中输入文字，提交给后台后，后台输出在另一个页面，文字按原格式显示。
在提交接口前处理绑定的数据
<el-input v-model="temp.content" :value="temp.content" type="textarea" :autosize="{ minRows: 4, maxRows: 20}" placeholder="请输入内容" class="filter-item" clearable />
方法一：可以用replace替换空格和换行
this.temp.content = this.temp.content.replace(/\n/g, '<br/>')
this.temp.content = this.temp.content.replace(new RegExp(' ', 'gm'), ' ')
方法二：识别换行后 分别加上p标签
这里需要注意的是 在传给接口前还需要将添加p标签后的数组形式转换成字符串
this.temp.content = this.temp.content.replace(new RegExp(' ', 'gm'), ' ') // gm 全局替换
const arr = []
this.temp.content.split('\n').forEach(item => {
arr.push(`<p>${item.trim()}</p>`)
})
this.temp.content = arr.join('')
方法三：使用属性contentEditable
属性contentEditable：用于设置或返回元素的内容是否可编辑。
给任意标签如div或p标签设置属性contentEditable = true，则p标签或div标签等为可编辑标签
<div ref="content" contenteditable="true" style="border:1px solid #C0C4CC;height:100%:overflow-y:auto;" @input="changeTxt" v-html="temp.content">{{ temp.content }}</div>
changeTxt() {
this.tempContent = this.$refs.content.innerHTML
},
image.png
