Vue

s

HTML

<div id="app">
  <span v-html="formattedText"></span>
  
  <div><b>HTML:</b></div>
  <span>{{ formattedText }}</span>
</div>

CSS

p {
  margin-bottom: 1rem;
}

Vue

new Vue({
  el: "#app",
  data: {
    text: `Mỗi năm hoa đào nở
Lại thấy ông đồ già
Bày mực Tàu, giấy đỏ
Bên phố đông người qua

Bao nhiêu người thuê viết
Tấm tắc ngợi khen tài:
“Hoa tay thảo những nét
Như phượng múa, rồng bay”`
  },
  computed: {
  	formattedText () {
    	return this.text
        .replace(new RegExp('\r\n', 'g'), '\n')
      	.split('\n\n')
        .map(p => `<p>${p}</p>`)
      	.join('')
        .replace(new RegExp('\n', 'g'), '<br>')
    }
  }
})