如何在Pinia存储中保留字符串换行并在HTML中显示段落间距？

你遇到的问题是Pinia中存储的多段文本在HTML渲染时无法保留段落间距，下面给你几种可行的解决方法：

方法1：使用v-html渲染带HTML换行标签的文本 #

直接在存储的文本中加入<br><br>来表示段落间隔，然后通过Vue的v-html指令渲染（普通插值{{ }}会转义HTML标签，所以无法生效）。

修改后的Pinia代码：

export const useContentStore = defineStore('contentStore', {
  state: () => {
    return {
      guides: [{
        description: 'Paragraph one.<br><br>Paragraph two.<br><br>Paragraph three.',
      }],
    }
  },
})

对应的模板代码：

<template>
  <main class="content-page">
    <div v-html="content.description"></div>
  </main>
</template>

⚠️ 注意：如果文本包含用户输入内容，使用v-html存在XSS风险，需要先做内容过滤。

方法2：将文本拆分为数组，用v-for渲染独立段落（推荐） #

这种方式更符合HTML语义，每个段落对应一个<p>标签，浏览器默认会给<p>标签添加上下外边距，自然形成段落间距。

修改后的Pinia代码：

export const useContentStore = defineStore('contentStore', {
  state: () => {
    return {
      guides: [{
        description: ['Paragraph one.', 'Paragraph two.', 'Paragraph three.'],
      }],
    }
  },
})

对应的模板代码：

<template>
  <main class="content-page">
    <p v-for="(paragraph, idx) in content.description" :key="idx">{{ paragraph }}</p>
  </main>
</template>

方法3：用CSS处理含换行符\n的文本 #

如果想保留文本中的\n换行符，可以给容器元素设置CSS的white-space: pre-line属性，该属性会识别换行符并换行，同时合并多余的空格。

修改后的Pinia代码：

export const useContentStore = defineStore('contentStore', {
  state: () => {
    return {
      guides: [{
        description: 'Paragraph one.\n\nParagraph two.\n\nParagraph three.',
      }],
    }
  },
})

对应的模板及样式代码：

<template>
  <main class="content-page">
    <p class="paragraph-text">{{ content.description }}</p>
  </main>
</template>

<style scoped>
.paragraph-text {
  white-space: pre-line;
}
</style>

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