JSON数组和JSON对象在vue中的获取方法

当我们在Vue.js应用程序中使用数据时，经常需要从后端服务器获取JSON格式的数据并将其渲染到视图中。JSON（JavaScript Object Notation）是一种用于数据交换的轻量级数据格式。在Vue.js应用程序中，我们可以使用两种基本的JSON数据类型：JSON数组和JSON对象。

获取JSON数组

JSON数组是由多个JSON对象组成的元素列表。在Vue.js应用程序中，我们可以通过以下方法获取JSON数组：

1.在data中声明一个数组

在Vue.js组件的data属性中，我们可以声明一个数组并将其初始化为空数组。当我们从服务器获取JSON数组时，我们可以将这个数组填充到已声明的数组中，并使用该数组作为组件的状态信息以便Vue.js渲染视图。

例如，假设我们的服务器返回以下JSON数组：

[
  { "id": 1, "name": "John" },
  { "id": 2, "name": "Jane" },
  { "id": 3, "name": "Bob" }
]

我们可以在Vue组件中声明一个空数组，并在成功获取到数据后进行填充：

export default {
  data() {
    return {
      users: [] // 初始化为空
    }
  },
  mounted() {
    axios.get('https://example.com/users')
      .then(response => {
        this.users = response.data // 成功获取数据后，将其赋给 users 数组
      })
  }
}

在组件的模板中，我们可以使用 v-for 指令来循环渲染每个用户：

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

这将输出以下结果：

• John
• Jane
• Bob

2.直接获取JSON数组

Vue.js还可以直接从API获取JSON数组，并将其绑定到视图中，例如：

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  async mounted() {
    const response = await axios.get('https://example.com/users')
    this.users = response.data
  }
}
</script>

这种方法直接将从API获取到的JSON数组绑定到组件的数据状态上，而不需要在data中声明一个数组。

获取JSON对象

JSON对象是由多个属性/值对组成的集合。在Vue.js应用程序中，我们可以通过以下方法获取JSON对象：

在data中声明一个对象

当我们获取一个JSON对象时，我们需要在Vue.js组件的data属性中声明一个空对象，并将获取到的JSON对象转换为该对象。我们可以使用ES6的 Object.assign 方法将每个属性拷贝到一个空对象中，或使用ES6的 解构赋值 语法将其直接赋值给变量。

例如，假设我们的服务器返回以下JSON对象：

{
  "name": "John",
  "age": 30,
  "address": { "city": "Shanghai", "country": "China" }
}

我们可以在Vue组件中声明一个空对象 user ，并在成功获取到数据后进行填充：

export default {
  data() {
    return {
      user: {}
    }
  },
  mounted() {
    axios.get('https://example.com/user')
      .then(response => {
        this.user = response.data // 将获取到的 JSON 赋给 user 对象
      })
  }
}

在组件的模板中，我们可以使用插值语法 {{ }} 来读取对象中的属性：

<p>Name: {{ user.name }}</p>
<p>Age: {{ user.age }}</p>
<p>Address: {{ user.address.city }}, {{ user.address.country }}</p>

这将输出以下结果：

Name: John
Age: 30
Address: Shanghai, China

直接获取JSON对象

Vue.js还可以直接从API获取JSON对象，并将其绑定到视图中，例如：

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <p>Address: {{ user.address.city }}, {{ user.address.country }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: {}
    }
  },
  async mounted() {
    const response = await axios.get('https://example.com/user')
    this.user = response.data
  }
}
</script>

这种方法直接将从API获取到的JSON对象绑定到组件的数据状态上，而不需要在data中声明一个对象。