在字符串中使用'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;"在你的元素，然后它将工作。更多关于空白的信息

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>