VueJS 换行符未正确呈现

Question

我遇到了以下问题，我从包含换行符 \n 的 API 读取数据字符串，我想在我的模板中正确显示它们。

但是当我做类似的事情时：

 <p>{{ mytext }}</p>

文本显示为 \n 字符，就像普通文本一样。

来自响应的文本字符串的格式为 "Hello, \n what's up? \n My name is Joe" 。

我在这里做错了什么？

原文由 Tobias Schäfer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

甚至不是 vue 问题，您可以简单地使用 CSS 并将 white-space: pre; 应用于内容。你不应该为此需要一个额外的包。

 new Vue({
  el: '#app',
  data: {
    text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n'
  }
})

 .pre-formatted {
  white-space: pre;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <div class="pre-formatted">{{ text }}</div>
</div>

原文由 Lawrence Cherone 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 <pre></pre> 标签来 保存 预先 格式化的文本。更多信息 MDN 预标记文档

 new Vue({
  el: '#app',
  data: {
    text: 'Hello, \n what\'s up? \n My name is Joe'
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <pre>{{ text }}</pre>
</div>

原文由 DobleL 发布，翻译遵循 CC BY-SA 3.0 许可协议