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