String 如何渲染字符串中包含的换行符？

“我的字符串”中包含的换行符仅呈现为

，而不是实际的换行符

我试着用背虱，但没有用。有没有一种简单的方法可以在页面上呈现换行符，理想情况下不会对代码进行太深的修改

标记：

<div
  v-for="item in faqItems"
  :key="item.id"
>
  <span class="faq-item-title">
    {{ item.title }}
  </span>
  <span class="faq-item-details">
    {{ item.text }}
  </span>
  <svg-icon name="chevron-down"></svg-icon>
</div>

{{item.title}
{{item.text}

JS:

常见问题解答项目：[ { 标题：“无车拱同侧”， 正文：“不要坐在一棵树上，一棵树，一棵树，一棵树的直径。

一棵树，一棵树，一棵树，一棵树，一棵树，一棵树，一棵树，一棵树，一棵树，一棵树，一棵树。” }, { 标题：“iaculis egestas nisl”， 正文：“我是一个直径为枕叶间隙的元素，坐在一个扭曲的交通工具上。” }

---

使用反勾号，然后添加css条目，如下所示：

<div
  v-for="item in faqItems"
  :key="item.id"
>
  <span class="faq-item-title" style="white-space: pre-wrap;">
    {{ item.title }}
  </span>
  <span class="faq-item-details" style="white-space: pre-wrap;">
    {{ item.text }}
  </span>
  <svg-icon name="chevron-down"></svg-icon>
</div>

{{item.title}
{{item.text}

一种方法是用文本换行符（

\n

）替换您的

并将其作为版面中的文本使用：

{
  title: 'Nullam vehicula arcu ipsum',
  text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.\n\nNunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.\n\nDonec neque leo, porttitor a diam et, sodales volutpat libero.'
}

正如Daniel所指出的，文本换行符在

中不起作用。除非将其映射到

。
=>属性的innerText

——该属性在引擎盖下将所有文本换行符转换为

并相应地将文本划分为不同的文本节点）

---

另一种方法是为此使用专用的Vue指令，该指令将字符串解析为html:

v-html

<span class="faq-item-details" v-html="item.text" />

使用v-html:

可能重复的

<span class="faq-item-details" v-html="item.text" />