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

问题描述

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

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

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

But when I do something like:

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

显示的文本与普通文本一样以\n个字符显示.

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

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

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

我在做什么错了?

推荐答案

甚至没有什么问题，您可以简单地使用CSS并将white-space: pre;应用于内容.您不需要为此使用其他软件包.

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

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