Question

字符串中包含的换行符仅显示为 ，而不是实际的换行符。

我试图使用反引号无济于事。有没有一种简单的方法可以在页面上呈现换行符，而理想情况下又不会对我的代码进行太深的修改？

标记：

<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>

JS：

faqItems: [
  {
    title: 'Nullam vehicula arcu ipsum',
    text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.<br><br>Nunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.<br><br>Donec neque leo, porttitor a diam et, sodales volutpat libero.'
  },
  {
    title: 'In iaculis egestas nisl',
    text: 'Etiam a elementum diam. Praesent lobortis pulvinar lacus, sit amet vehicula tortor.'
  }

Answer 1

~~一种方法是将 替换为文本换行符（\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.' }

正如丹尼尔指出的那样，文字换行符在中不起作用。除非将其映射到.innerText => Example的属性，否则它会将所有文字中断转换为 并将文本分成不同的文本节点）。

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

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

Answer 2

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

如何呈现字符串中包含的换行符？

2 个答案: