Vue中v-html无法渲染\r\n\t

Question

我有这样的数据：

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

根据数据，我想使用 Vue js 显示它。

这是我的 Vue js 代码：

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

如果执行上面的代码，结果是这样的：

可以看到，rn和t似乎没有被Vue js渲染

如何让r n和t被Vue js渲染并显示如下？

Answer 1

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