VueJS中数组拼接为字符串后如何让HTML识别解析换行符\n？

问题根因 #

HTML默认会将所有连续空白字符（包括换行符\n、空格、制表符）合并为单个空格，所以直接渲染包含\n的字符串时不会触发换行。

解决方案 #

• 方案1（最推荐，无安全风险，无需修改JS逻辑）
  给渲染该字段的元素添加white-space CSS属性即可识别换行符：

<template>
  <!-- pre-line会保留换行，合并多余空格，符合大多数业务场景 -->
  <div style="white-space: pre-line">{{ obj.destination }}</div>
</template>

如果需要保留所有原始空格和缩进，可以替换为white-space: pre-wrap。

• 方案2（替换为HTML换行标签，适合需要自定义换行样式的场景）
  先将数组拼接时的分隔符替换为<br>标签，再用v-html指令渲染内容：

// JS逻辑修改
destination: item[1].destination.join('<br>')

<template>
  <div v-html="obj.destination"></div>
</template>

注意：如果destination的内容存在用户可控输入，必须先做XSS过滤再使用v-html，避免注入攻击。

• 方案3（直接渲染数组，安全性最高）
  如果不需要将数组转为字符串存储/传输，可以直接在模板中循环渲染数组项，利用块级元素的特性自动换行：

<template>
  <div v-for="(dest, index) in item[1].destination" :key="index">
    {{ dest }}
  </div>
</template>

内容的提问来源于stack exchange，提问作者dokichan