Vue v-html 不渲染 \r \n \t答案

【问题标题】：Vue v-html not render \r \n \tVue v-html 不渲染 \r \n \t
【发布时间】：2022-01-12 13:22:32
【问题描述】：

我有这样的数据：

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 渲染

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

【问题讨论】：

在标记中添加回车和换行可能不是正确的做法。使用样式表，或者简单地依赖 Vue 的“正常”做事方式。
在我目前的状态下，数据源是不可变的。有没有办法使这些现有数据不可变？
不变性与渲染数据有什么关系？
我的意思是我要渲染的数据的来源不能改变，所以数据中必须有\r\n和\t。您建议使用样式表意味着必须更改数据源。在我的情况下，无法更改数据源
不，我建议您不需要数据中的 \r 和 \n 来完成这项工作。

标签： html regex vue.js render

【解决方案1】：

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

【讨论】：

这是无效的，但不应该工作吗？在 jsfiddle 中简单的复制/粘贴显示良好的视觉效果
这里有一些例子：jsfiddle.net/bgm8eqta
查看innerHTML：jsfiddle.net/Minart/bpqrhfoc
我认为您的问题中一定遗漏了一些东西，因为它对我来说很好：jsfiddle.net/L54r6qdm 我使用了您的确切文本，并且 \r\n 没有出现在输出中。你能发布更多你的代码吗？

【解决方案2】：

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

试试

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

【讨论】：

试过了还是不行