在字符串中使用 '\n' 的新行在 vue js 中不起作用

Question

我无法在 vue js 中使用 \n 或字符串值中的任何内容插入新行，任何建议将带有新行的字符串值传递给变量，它会像 html 一样显示 -

字符串 1 字符串 2 字符串 3

Answer 1

将内容包裹在 pre 元素中。

<pre>New line here!
Yo it's a new line!</pre>

      

Answer 2

在您的元素中使用 style="white-space: pre-wrap;" 然后它会起作用。有关 white-space 的更多信息。

new Vue({
  el: '#app',
  data: {
    message: "Hello Vue! It's a good day.\nBe happy!"
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-text="message" style="white-space: pre-wrap;"></div>