Vue 是一种用于构建用户界面的渐进式 JavaScript 框架，而 JSON（JavaScript Object Notation）是一种常用的数据格式，用于存储和交换数据。在 Vue 中，我们可以通过一些方法来格式化和显示 JSON 数据。

我们可以使用 Vue 的插值语法将 JSON 数据显示在模板中。假设我们有一个 JSON 对象，可以在 Vue 实例的 data 属性中定义它：

`javascript

data() {

return {

jsonData: {

name: 'John',

age: 25,

email: 'john@example.com'

}

}

然后，在模板中使用双花括号将 JSON 数据插入到 HTML 中：
`html

  Name: {{ jsonData.name }}
  Age: {{ jsonData.age }}
  Email: {{ jsonData.email }}

这样，Vue 会将 JSON 数据的属性值动态地显示在页面上。

如果我们想要以更友好的方式显示 JSON 数据，可以使用 Vue 的计算属性来格式化它。我们可以创建一个计算属性，将 JSON 对象转换为字符串，并使用 JSON.stringify() 方法进行格式化：

`javascript

computed: {

formattedJson() {

return JSON.stringify(this.jsonData, null, 2);

}

然后，在模板中使用计算属性来显示格式化后的 JSON 数据：
`html

  
{{ formattedJson }}

这样，JSON 数据将以缩进的形式显示在页面上，更易读。

除了使用计算属性，我们还可以使用过滤器来格式化 JSON 数据。可以在 Vue 实例中定义一个过滤器，使用 JSON.stringify() 方法对数据进行格式化：

`javascript

filters: {

formatJson(value) {

return JSON.stringify(value, null, 2);

}

然后，在模板中使用过滤器来格式化 JSON 数据：
`html

  
{{ jsonData | formatJson }}

这样，JSON 数据将以缩进的形式显示在页面上。

总结一下，我们可以通过插值语法、计算属性或过滤器来格式化和显示 JSON 数据。无论使用哪种方法，都可以根据需求将 JSON 数据以可读性高的方式展示给用户。

上一篇

vue中怎么阻止事件冒泡

下一篇

vue上传文件和后端upload