Skip to content

后端传来的数据中,包含换行符号/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攻击。

Released under the MIT License.