需求

一个商品管理系统，需要新增一个商品的信息，有一个备注字段，需要做成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样式