Vue 展示的文本换行 静态文本按格式显示 textarea文本的换行 亲测有效

需求

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