Vue 中引入 json 的三种方法

最新推荐文章于 2024-03-30 17:33:28 发布

青颜的天空

最新推荐文章于 2024-03-30 17:33:28 发布

阅读量3.7w

点赞数 20

分类专栏： Vue Vue3 文章标签： vue json

本文链接：https://blog.csdn.net/a1056244734/article/details/116488828

版权

Vue 同时被 2 个专栏收录

26 篇文章 3 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

本文介绍了JSON（JavaScript Object Notation）作为轻量级数据交换格式的使用，详细阐述了在JavaScript中通过require、import以及HTTP请求三种方式来加载和使用JSON文件的方法。require常用于运行时加载，import适用于编译时输出接口，而HTTP请求则常用于从服务器获取数据。示例代码展示了如何解析并访问JSON数据中的属性。

摘要由CSDN通过智能技术生成

json的定义：

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

1.require-运行时加载

test.json文件

{
  "testData": "hello world",
  "testArray": [1,2,3,4,5,6],
  "testObj": {
    "name": "tom",
    "age": 18
  }
}

// require引用：
mounted() {
    // require引用时，放src和放statci都可以，建议放static
    const testJson = require('../../static/json/test.json');
    const {testData, testArray, testObj} = testJson;
    console.log('testData',testData);
    // ‘hello world’
    console.log('testArray',testArray);
    // [1,2,3,4,5,6]
    console.log('testObj',testObj);
}

2.import-编译时输出接口

// import 引用
// import引用时，放src和放statci都可以，建议放static
import testImportJson from '../../static/json/test.json'
// import testImportJson from './json/test.json'
export default {
  data(){
    return{
      testImportJson  
    }
  },
  mounted() {
    const {testData, testArray, testObj} = this.testImportJson;
  }
}

3. 通过http请求获取

// http引用
methods:{
  async jsonHttpTest(){
    const res = await this.$http.get('http://localhost:8080/static/json/test.json');
    // 放在src中的文件都会被webpack根据依赖编译，无法作为路径使用，static中的文件才可以作为路径用
    const {testData, testArray, testObj} = res.data;
  }
},
mounted() {
  this.jsonHttpTest();
},