vue3.0 加载json的方法（非ajax）

Vue 3.0 中加载 JSON 文件非常简单，可以直接使用内置的 import 语法来加载 JSON 文件，而不需要使用 Ajax。下面是完整攻略：

步骤

1. 在你的 Vue 3.0 项目中创建 JSON 文件。例如，创建一个名为 data.json 的文件并在其中添加以下内容：

{
  "name": "John",
  "age": 30,
  "gender": "male"
}

1. 在需要调用该 JSON 文件的组件中，使用 import 语法将 JSON 文件导入到组件中。例如，在 App.vue 组件中导入 data.json 文件：

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ gender }}</p>
  </div>
</template>

<script>
import jsonData from './data.json';

export default {
  name: 'App',
  data() {
    return {
      name: jsonData.name,
      age: jsonData.age,
      gender: jsonData.gender
    }
  }
}
</script>

在代码中，我们使用 import 语法导入 data.json 文件，并将其导入为 jsonData 变量。然后，我们可以在 data() 方法中使用 jsonData 对象来获取 JSON 文件中的数据。最后，我们将数据分别绑定到模板中。

1. 运行该组件。如果一切都设定正确，你将会看到如下内容：

<div>
  <p>John</p>
  <p>30</p>
  <p>male</p>
</div>

示例说明

示例 1

在 App.vue 组件中导入 data.json 文件，并将整个 JSON 对象直接绑定到 data 选项中：

<template>
  <div>
    <p>{{ jsonData.name }}</p>
    <p>{{ jsonData.age }}</p>
    <p>{{ jsonData.gender }}</p>
  </div>
</template>

<script>
import jsonData from './data.json';

export default {
  name: 'App',
  data() {
    return {
      jsonData
    }
  }
}
</script>

示例 2

在 App.vue 组件中异步加载 data.json 文件，并打印出其内容：

<template>
  <div>
    <button @click="loadData">Load Data</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    async loadData() {
      const response = await fetch('./data.json');
      const data = await response.json();
      console.log(data);
    }
  }
}
</script>

在此示例中，我们使用 fetch 函数异步加载 data.json 文件，并使用 response.json() 方法将响应体转换为 JavaScript 对象。最后，我们打印出获取到的 JSON 数据。