Appearance
后端传来的数据中,包含换行符号/n
,直接丢到花括号中根本无法渲染。
处理这种情况需要用Vue自带的指令v-html
。
示例数据:
js
data() {
return {
test: {
id: 64,
companyId: 9,
description:
"要求:男女不限、38岁以内;身体健康、能吃苦耐劳。\n福利:提供住宿、厂车接送、节日福利等。\n上班时间:8-12小时两班倒。\n",
},
}
},
使用v-html
渲染:
html
<view class="text" v-html="test.description"></view>
但这还是不能换行。因为/n
并不是html中的换行标签,而是换行键的转义字符(Escape character)。类似的有\t
,它代表一个制表符(Tab符号)。
所以需要把数据中的/n
全部替换为标签<br>
:
js
this.test.description = this.test.description.replace(/\n/g, '<br>')
这样就成功渲染了。
v-html: 渲染html,但慎用,有可能会导致XSS攻击。