一、问题描述

• 含有 \n 的字符串换行显示时未换行被识别为空格,场景如下：

<template>
  <div class="box">{{ data.str }}</div>
</template>
<script setup>
import { reactive } from 'vue';
const data = reactive({
  str: '加油\n乐'
})
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>

二、解决方法

1、使用css属性white-space: pre-wrap;解决

• 在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示。

• normal：默认，忽略文本中所有的空白、换行符；只有文本存在 或文本达到框的约束时，文本才会换行。

• pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 或文本中有换行符时，文本才会换行。

• nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行。

• pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行。

• pre-line：会略文本中的空白符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行。

<template>
  <div class="box">{{ data.str }}</div>
</template>
<script setup>
import { reactive } from 'vue';
const data = reactive({
  str: '加油\n乐'
})
// const { } = toRefs(data)
</script>
<style scoped lang="scss">
.box{
  white-space: pre-wrap;
}
</style>

效果：

2、使用JS方法replace将字符串里的\n替换为<br>

• 通过JS方法replace将字符串里的\n替换为<br>后，使字符串渲染为innerHTML

<template>
  <div class="box" v-html="data.newStr"></div>
</template>
<script setup>
import { reactive, onMounted } from 'vue';
const data = reactive({
  str: '加油\n乐',
  newStr: '',
})
data.newStr = data.str.replace(/\n/g, '<br>');
// const { } = toRefs(data)
</script>
<style scoped lang="scss"></style>

效果：