从firebase数据库获取数据时如何在前端保留\ n？

Question

我正在尝试从 Firebase 实时数据库中获取数据，其中 \n 保留在前端。

使用 css 属性：“white-space: pre-line”，我可以将 \n 发送到 firebase 数据库，但是当我尝试使用 Vue.js 在前端获取数据时，它不会维护\n。

Firebase 数据库是一个数组，所以我尝试将数组转换为字符串，并将“\n”转换为空白。我没有找到任何在线帮助如何在前端显示数据时保留 \n

我的 Firebase 数据库：

answers
 0: "some data"
 1: "some data. more data.\nsomething"

我正在使用 for 循环来显示新行的每个答案。但是将每个键值拆分为新行而不是带有“\n”的数据。

感谢任何帮助或指导。

Answer 1

您可以将\n 替换为<br/> 并将其显示为html。

let str = "some data. more data.\nsomething";

str = str.replace('\n', '<br/>');
// "some data. more data.<br/>something"

然后使用v-html 指令显示它。

<span v-html="str"></span>

这会将您的内容显示为 html。

但是：在您的网站上动态呈现任意 HTML 可能非常危险，因为它很容易导致 XSS 漏洞。仅对受信任的内容使用 HTML 插值，从不对用户提供的内容使用。

请看这里： https://vuejs.org/v2/guide/syntax.html#Raw-HTML

例子：

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    answers: ["some data", "some data. more data.\nsomething"]
  },
  computed: {
    transformed_answers() {
      return this.answers.map(a => a.replace('\n', '<br/>'));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="answer in transformed_answers">
    <p v-html="answer"></p>
  </div>
</div>