web-dev-qa-db-ja.com

VueJS改行文字が正しくレンダリングされない

次の問題が発生しました。改行文字\nを含むAPIからデータ文字列を読み取り、テンプレートに正しく表示したいと思います。

しかし、私が次のようなことをすると：

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

テキストは、通常のテキストと同様に、\n文字が含まれる表示です。

応答のテキスト文字列は、"Hello, \n what's up? \n My name is Joe"の形式です。

ここで何が悪いのですか？

javascriptstringvuejs2newline
10
Tobias Schäfer

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>
13
Lawrence Cherone

使用 <pre></pre>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>
3
DobleL

私は使用していた同じ問題に直面していたvue-nl2br

確認してください ここ

インストール

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>
2
Abderrahim Soubai Elidrissi