vue换行标签

Vue.js 中实现换行效果的方式
在 Vue.js 应用程序中，有多种方法可以实现在渲染文本时显示换行的效果。
使用 <br> 标签
当需要简单地插入一个换行符而不改变样式或其他布局特性时，可以直接使用 HTML 的 <br> 标签。然而，在 JavaScript 字符串中直接嵌入 \n 并不会自动转换为浏览器中的换行；因此，如果希望基于包含换行符的字符串动态生成带有实际换行的内容，则需额外处理[^2]。
<template>
<div>{{ textWithLineBreaks }}</div> <!-- 不会解析 \n -->
</template>

<script>
export default {
data() {
return {
rawText: "这是第一行\n这是第二行"
};
},
computed: {
textWithLineBreaks() {
return this.rawText.replace(/\n/g, '<br>');
}
}
};
</script>
登录后复制
这种方法通过计算属性 textWithLineBreaks 将原始文本中的每一处换行符替换为 <br> 标签，从而实现了预期的行为。
利用 <pre> 标签保持原有格式
另一种更简便的方法是利用 HTML 的 <pre> 标签，它可以保留源码中的空白字符和换行，使得任何被包裹在内的文本都会按照其原本的形式展示给用户。
<template>
<pre>{{ rawText }}</pre>
</template>
登录后复制
这种方式非常适合用于呈现代码片段或者其它需要精确控制格式化的场景。
动态构建 VNodes 进行复杂内容渲染
对于更加复杂的场景，比如想要自定义每一段文字之间的分隔线或者其他视觉元素，可以通过编程方式创建虚拟节点(VNode)，并将其作为消息提示框等内容的一部分传递进去[^3]。
const h = this.$createElement;
const message = '123！<br/> 456';
const lines = message.split('<br/>');
const content = h(
'div',
{},
lines.map((line) => h('p', {}, line))
);
this.$message.error({
content,
duration: 3 * 1000 // 单位毫秒
});
登录后复制
上述例子展示了如何将含有特殊标记（如 <br/>）的消息拆分成多个段落，并分别封装进独立的 <p> 元素里再组合起来形成最终要显示的信息结构。