Question

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

但是当我做的事情如下：

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

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

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

我在这里做错了什么？

Answer 1

即使是vue问题，您也只能使用CSS并将white-space: pre;应用于内容。你不应该需要一个额外的包。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我正面临着使用vue-nl2br

的同一个问题

检查here

安装

npm install --save vue-nl2br

<强>用法

import Nl2br from 'vue-nl2br' Vue.component('nl2br', Nl2br)

查看

<nl2br tag="p" :text="`myLine1\nmyLine2`" />

结果：

<p>myLine1<br>myLine2</p>

Answer 3

使用<pre></pre>标记预提供预格式化文本。更多信息MDN Pre tag docs

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>

Answer 4

这是在多个 <div> 元素中拆分字符串的解决方案。

我也将它与 i18n 插件一起使用，我喜欢它，因为我不需要接触 CSS。

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 v-for="text of text">{{ text }}</div>
</div>

VueJS换行符未正确呈现

4 个答案: