Vue中如何在字符串变量存储换行符并正确渲染展示

问题原因 #

Vue的模板插值语法{{ }}会将内容自动转义为纯文本，你写入的<br/>标签不会被解析为HTML节点，只会作为普通字符串展示，所以无法实现换行效果。

可行解决方案 #

• 方案1：使用v-html指令渲染HTML内容
  如果你需要在字符串中嵌入HTML标签实现换行，直接把插值语法替换为v-html指令即可，模板修改如下：

<template>
  <div id="app" v-html="text"></div>
</template>

注意：该方式存在XSS注入风险，若text变量内容来自用户输入或不可信源，禁止使用该方案

• 方案2：使用\n换行符配合CSS控制（更推荐）
  不需要插入HTML标签，在需要换行的位置直接插入\n，再给外层元素添加white-space: pre-line样式即可识别换行符：

1. 调整text变量内容，换行位置加\n：

data() {
  return {
    text: "第一段内容\n第二段内容\n第三段内容"
  }
}

2. 模板添加对应样式：

<template>
  <div id="app" style="white-space: pre-line;">{{ text }}</div>
</template>

该方案不会触发XSS风险，是更安全的实现方式。

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