免费企业建站谷哇网站建设

Vue 中，直接使用包含 \n 的字符串进行渲染时，换行符不会被识别为 HTML 的换行，因为 Vue 默认会将其视为普通文本。

对此提供两种解决办法

方法一：使用 v-html 指令替换 \n 为 <br>

<template><div v-html="formattedText"></div>
</template><script>
export default {data() {return {originalText: "This is the first line.\nThis is the second line."};},computed: {formattedText() {return this.originalText.replace(/\n/g, '<br>');}}
};
</script>

在 data 中定义了 originalText，其中包含了 \n 作为换行符的字符串。
通过 computed 属性 formattedText，使用 replace(/\n/g, ‘<br>’) 方法将 \n 替换为 <br> 元素。
在模板中使用 v-html 指令将 formattedText 作为 HTML 进行渲染，这样 <br> 元素会被解析为换行效果。

方法二：使用 white-space: pre-line CSS 属性

<template><div class="text-container">{{ originalText }}</div>
</template><script>
export default {data() {return {originalText: "This is the first line.\nThis is the second line."};}
};
</script><style scoped>
.text-container {white-space: pre-line;
}
</style>

在 data 中同样定义了 originalText 包含换行符的字符串。
在模板中直接使用双花括号 {{ originalText }} 进行文本渲染。
在 style 中为包含文本的元素添加 white-space: pre-line 的 CSS 属性，它会将连续的空格合并为一个空格，并且将 \n 作为换行符进行显示。