HTML 本身并不识别 \n
作为换行符。在 HTML 中,换行通常是通过 <br>
标签来实现的。
Vue 的 v-html
指令用于输出原始的 HTML,但它不会自动将 \n
转换为 <br>
。因此,如果你从后端接收到的文本包含 \n
,并希望这些 \n
在页面上显示为换行,你需要在将数据传递给 v-html
之前,先将 \n
替换为 <br>
。
<template>
<div>
<!-- 使用处理后的文本 -->
<div v-html="processedText"></div>
</div>
</template>
<script>
export default {
data() {
return {
// 假设这是从后端接收到的原始文本
rawText: "这是第一行\n这是第二行\n这是第三行",
};
},
computed: {
// 计算属性,用于将 \n 转换为 <br>
processedText() {
return this.rawText.replace(/\n/g, '<br>');
},
},
};
</script>
rawText
是从后端接收到的包含 \n
的原始文本。使用了一个计算属性 processedText
来处理这个文本,将所有的 \n
替换为 <br>
。然后将 processedText
传递给 v-html
指令,以在 HTML 中渲染处理后的文本,这时 \n
就被正确地显示为换行了。