需求

一个商品管理系统，需要新增一个商品的信息，有一个备注字段，需要做成textarea，在textarea中用户是可以进行换行的。在新增完商品之后在查看详情时，备注字段的显示需要和textarea中的格式一致。

解决方案

1.将字符串的"/n"替换成html中的换行标签 "br"使用v-html绑定

<template> <h>备注</h> <div v-html="remark"></div> </template> <script> expoet default { data () { return { str: '1上午\n2下午\n3晚上' } }, computed: { remark () { return this.str.split('\n').join('<br/>') } } } </script>

使用v-html会有安全风险 需要解决XSS

2.使用css 样式 white-space: pre-wrap;

<template> <h>备注</h> <div v-text="remark" style="white-space: pre-wrap;"></div> </template> <script> expoet default { data () { return { str: '1上午\n2下午\n3晚上' } } } </script>

第二种方式是目前看来最好的，不会带来别的风险。关于white-space具体的属性值的解释可以看文档white-space样式