【Vue】从后端返回数据如何保留文本的格式，包括换行

目录

一、使用场景

二、解决方案一：pre标签

三、解决方案二：v-html

---

一、使用场景

我数据库有个字段是带有换行符的varchar类型，比如有值为：

物质名称：空气\n温度：10\n压力：10

那么这种情况下，我返回给Vue，直接用{{this.value}} 是不行的，它无法把\n换行符识别出来。

二、解决方案一：pre标签

<pre>标签是可以保留文本格式的。

<pre>{{ value }}</pre>

三、解决方案二：v-html

使用 v-html：你可以将文本中的换行符替换为 HTML 的换行标签 <br>。

data() {
  return {
    value: "物质名称：空气\n温度：200\n压力：300"
  }
},
computed: {
  formattedValue() {
    return this.value.replace(/\n/g, '<br>');
  }
}

<div v-html="formattedValue"></div>