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>\r\n\r\n<p><span style=\"font-size:16px\"><strong>1. Pemberontakan Angkatan Perang Ratu Adil (APRA) </strong></span></p>\r\n\r\n<ul>\r\n\t<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>

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

您可以看到，\r \n 和 \t 似乎没有被 Vue js 渲染

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

Answer 1

我没有完整的代码，但在第一次阅读后：

尝试

v-html="content"

和

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

Answer 2

\r 、 \n和\t无效 HTML； they are escape sequences that are used in other languages (so expecting them to work in HTML would be like pasting python code into a javascript file and expecting it to run.) You need to replace them with HTML that does what you want it to do . 对于新行，可以使用<br>标签，但传统上人们通过将其部分包装在段落 ( <p> ) 或 div ( <div> ) 中来处理换行符。 对于制表符，您需要在谷歌上搜索如何处理 HTML 中的缩进，因为关于它的内容比我在此处的简短回答中所能解释的要多得多。