【vue】vue 里面使用 v-html 插入的文本带有换行符‘ ‘不换行

在Vue中使用v-html插入带有换行符的文本时，你可能会发现插入的HTML中的换行符被解析为空格。这是因为HTML会把连续的空白字符合并为一个空格。

要在Vue中保留这些换行，可以使用white-space CSS属性。你可以在组件的<style>标签中或者外部CSS文件中设置样式，确保white-space: pre-wrap; 或者 white-space: pre; 被应用到你的元素上。

下面是一个简单的例子：

<template>
  <div v-html="formattedText"></div>
</template>
 
<script>
export default {
  data() {
    return {
      rawText: `这是第一行
这是第二行
这是第三行`
    };
  },
  computed: {
    formattedText() {
      // 使用CSS样式标签包裹文本，确保换行被保留
      return `<div style="white-space: pre-wrap;">${this.rawText}</div>`;
    }
  }
};
</script>
 
<style>
/* 确保所有的div元素内的换行都被保留 */
div {
  white-space: pre-wrap;
}
</style>

在这个例子中，formattedText 计算属性返回一个带有<div>和内联样式的字符串，该样式确保文本中的换行符被保留。white-space: pre-wrap; 保证了换行符被保留，同时还允许文本自动换行。

请注意，动态插入HTML内容可能会带来跨站脚本攻击（XSS）的风险。因此，只在你能够确信内容来源安全的情况下使用 v-html，或者使用库如DOMPurify来清理潜在的危险内容。