VueJS 줄바꿈 문자가 올바르게 렌더링되지 않음

VueJS 줄바꿈 문자가 올바르게 렌더링되지 않음

다음과 같은 문제가 발생했는데, 새로운 행 문자가 포함된 API에서 데이터 문자열을 읽었습니다.\n템플릿에 올바르게 표시하고 싶습니다.

하지만 제가 이런 걸 하면:

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

텍스트는 다음과 같이 표시됩니다.\n일반 텍스트와 같은 문자입니다.

응답 텍스트 문자열의 형식은 다음과 같습니다."Hello, \n what's up? \n My name is Joe".

내가 여기서 뭘 잘못하고 있는 거지?

단순히 CSS를 사용하여 적용할 수 있는 Vue 문제도 아닙니다.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>

를 사용합니다.<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>

내가 쓰던 것과 똑같은 이서스를 마주하고 있었다.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>

이것은 문자열을 여러 개로 분할하는 솔루션입니다.<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>

언급URL : https://stackoverflow.com/questions/49264645/vuejs-newline-character-is-not-rendered-correctly