v-html tidak boleh dipaparkan dalam Vue\r\n\t

Question

Saya mempunyai data seperti ini:

data: {
  content:"<p><span style="font-size:16px">Berikut adalah beberapa pemberontakan yang pernah terjadi di daerah.</span></p>rnrn<p><span style="font-size:16px"><strong>1. Pemberontakan Angkatan Perang Ratu Adil (APRA) </strong></span></p>rnrn<ul>rnt<li><span style="font-size:16px">di Bandung, pada 23 Januari 1950.</span></li>"
}

Berdasarkan data, saya ingin memaparkannya menggunakan Vue js.

Ini kod Vue js saya:

<div class="row px-3" v-html="data.content"></div>

Jika anda melaksanakan kod di atas, hasilnya akan seperti ini:

Seperti yang anda lihat, rn dan t nampaknya tidak dipaparkan oleh Vue js

Bagaimana untuk membiarkan r n dan t dipaparkan oleh Vue js dan dipaparkan seperti berikut?

Answer 1

r、n 和 t 不是有效的 HTML；它们是在其他语言中使用的转义序列（因此期望它们在 HTML 中工作就像将 python 代码粘贴到 javascript 文件中并期望它运行一样。）您需要将它们替换为 HTML做你想让它做的事。对于新行，可以使用 <br> 标签，但传统上人们通过将其部分包装在段落 (<p>) 或 div (<div>) untuk mengendalikan barisan baharu. Untuk tab, anda perlu google cara mengendalikan lekukan dalam HTML kerana terdapat banyak perkara di luar sana yang tidak dapat saya jelaskan dalam jawapan ringkas di sini.