vue 读取json数据

Vue 可以轻松地读取 JSON 数据。首先，您需要在组件中定义一个数据对象。然后，使用 Vue 的生命周期钩子函数 mounted 来加载您的 JSON 数据。

在数据对象中定义一个空的数组

data(){
  return {
    jsonData: []
  };
},

然后在 mounted 钩子函数中发起一个 HTTP 请求来获取 JSON 数据并将其分配给 jsonData 数组。

mounted() {
  axios.get('http://localhost:3000/json-data')
    .then(response => {
      this.jsonData = response.data;
    })
    .catch(error => {
      console.log(error);
    });
}

上面的例子使用了 axios 库来发起 HTTP 请求，您也可以使用其他库或原生的 fetch API。在获取到 JSON 数据后，您可以使用 v-for 指令将其呈现在模板中。

<div v-for="item in jsonData" :key="item.id">
  {{ item.name }}
</div>

以上代码将在模板中呈现 JSON 数据中每个对象的名称属性。您可以根据需要在模板中使用其他属性。