在 Vue.js 內要讓換行符號(\n)可以在 HTML 內顯示換行,可以設定 CSS 就好,以下是範例程式碼:
vue 的部分
createApp({ data() { return { text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n' } } }).mount('#app')
CSS 部分設定 white-space: pre-line
.pre-formatted { white-space: pre-line; }
HTML 的部分:
<div id="app">
<div class="pre-formatted">{{ text }}</div>
</div>