博客

vue引用json文件的方法小结

  • Post category:http

以下是“vue引用json文件的方法小结”的完整攻略：

1. 确定json文件的位置

在Vue项目中，一般将JSON文件放置在src/assets目录下，但也可以任意选择任何目录添加JSON文件，只需在请求路径中添加相应的目录即可。

2. 导入json文件

2.1 使用import语句

在Vue项目中使用import语句导入JSON文件，步骤如下：

  1. 在Vue组件内部使用import语句导入JSON文件。
import jsonFile from "@/assets/json/example.json";
  1. 在Vue组件中可以直接使用jsonFile对象来操作该JSON文件。
// example.json中的内容： { "name": "John", "age": 30, "city": "New York" }
export default {
  name: "example",
  data() {
    return {
      jsonData: {},
    };
  },
  mounted() {
    this.jsonData = jsonFile;
  },
};

2.2 使用AJAX技术

使用AJAX技术加载JSON文件，步骤如下：

  1. 使用XMLHttpRequest对象创建请求，并设置请求路径和请求方式。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/example.json', true);
  1. 发送请求，等待数据加载完成。
xhr.send();
  1. 在请求完成后，将响应的JSON字符串解析为JSON对象并存储在Vue组件的data属性中。
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) { 
    const jsonData = JSON.parse(xhr.responseText);
    this.jsonData = jsonData;
  }
};

以上是两种vue引用json文件的方法，其中AJAX方式支持更多的数据请求方式，也更加灵活，但相对而言import方式代码可读性更高，可以更加方便地操作JSON数据对象。

示例1： 使用import语句导入示例：

在项目的src/assets/json目录下新建example.json文件，并输入以下内容： { “name”: “John”, “age”: 30, “city”: “New York” }

在Vue组件中引用该JSON文件的代码如下：

<template>
  <div>{{jsonData}}</div>
</template>
<script>
import jsonFile from "@/assets/json/example.json";
export default {
  name: "example",
  data() {
    return {
      jsonData: {},
    };
  },
  mounted() {
    this.jsonData = jsonFile;
  },
};
</script>

在浏览器中打开该组件，将会显示以下内容：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

示例2：使用AJAX技术加载示例:

在项目的/src/assets/json目录下新建example.json文件，并输入以下内容：{ “name”: “John”, “age”: 30, “city”: “New York” }

Vue组件代码如下：

<template>
  <div>{{jsonData}}</div>
</template>
<script>
export default {
  name: "example",
  data() {
    return {
      jsonData: {},
    };
  },
  mounted() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/src/assets/json/example.json', true);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const jsonData = JSON.parse(xhr.responseText);
        this.jsonData = jsonData;
      }
    }.bind(this);
  },
};
</script>

在浏览器中打开该组件，将会显示以下内容：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

希望这篇攻略能够对你有所帮助。

Tags: