vue3如何读取JSON数据

在 Vue.js 3 中，读取 JSON 数据通常涉及两个步骤：首先获取数据，然后将数据绑定到组件的数据属性或模板上。这里是一个简单的例子：

1. **获取数据**：
如果数据来自服务器，你可以使用 `axios`、`fetch` 或者 `@vue/cli-service` 自带的 `http` 客户端来发送 HTTP 请求并获取 JSON 数据。例如，假设你有一个 API 接口 `api/data.json`：

   import axios from 'axios';

   const fetchData = async () => {
     try {
       const response = await axios.get('/api/data.json');
       const jsonData = response.data; // 这里就是 JSON 对象
       return jsonData;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   };

2. **绑定数据**：
当你从 API 获取到 JSON 数据后，可以将其赋值给 Vue 实例的一个数据属性：

   export default {
     data() {
       return {
         myData: null,
       };
     },
     async created() {
       this.myData = await fetchData();
     },
   };

然后，在模板中使用 `v-bind` 或者更简洁的方式 `:` 来展示这个 JSON 数据：

   <template>
     <div v-if="myData">
       <ul>
         <li v-for="(item, index) in myData" :key="index">{{ item.propertyName }}</li> <!-- 这里的propertyName是JSON对象中需要显示的键 -->
       </ul>
     </div>
   </template>