v-html kann nicht in Vue gerendert werden\r\n\t

Question

Ich habe Daten wie diese:

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>"
}

Basierend auf den Daten möchte ich sie mit Vue js anzeigen.

Das ist mein Vue-JS-Code:

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

Wenn Sie den obigen Code ausführen, sieht das Ergebnis so aus:

Wie Sie sehen können, scheinen rn und t nicht von Vue js gerendert zu werden

Wie lassen sich rn und t von Vue js rendern und wie folgt anzeigen?

Answer 1

\r、\n 和 \t 不是有效的 HTML；它们是在其他语言中使用的转义序列（因此期望它们在 HTML 中工作就像将 python 代码粘贴到 javascript 文件中并期望它运行一样。）您需要将它们替换为 HTML做你想让它做的事。对于新行，可以使用 <br> 标签，但传统上人们通过将其部分包装在段落 (<p>) 或 div (<div>) 中来处理换行符。对于选项卡，您需要在 google 上搜索如何处理 HTML 中的缩进，因为关于它的内容有很多，我无法在此处的简短答案中解释。