在 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>