VueJS 换行符未正确呈现 [英] VueJS newline character is not rendered correctly

问题描述

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

但是当我做这样的事情时:

{{ mytext }}

文本显示为带有 个字符，就像普通文本一样.

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

我在这里做错了什么?

解决方案

即使是 vue 问题，您也不能简单地使用 CSS 并将 white-space: pre; 应用于内容.您不应该为此需要额外的包.

new Vue({el: '#app',数据: {text: 'Hello Vue.
这是一行文本.
另一行文本.
'}})

.pre-formatted {空白:预；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></脚本><div id="应用程序"><div class="pre-formatted">{{ text }}</div>

I got the following problem, I read data string from an API which contains new line characters and I want to display them correctly in my template.

But when I do something like:

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

The text is display with characters in it like normal text.

The text string from the response is in the format of "Hello, what's up? My name is Joe".

What am I doing wrong here?

解决方案

Not even a vue issue you could simply use CSS and apply white-space: pre; to the content. You shouldn't need an additional package for this.

new Vue({
  el: '#app',
  data: {
    text: 'Hello Vue.
This is a line of text.
Another line of text.
'
  }
})

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

这篇关于VueJS 换行符未正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！