当前位置: 首页 > article >正文

vue-cli引入本地json数据:封装为js文件,无需请求直接读取

vue-cli引入本地json数据

1、新建js文件(路径自定义),写入JSON数据

/* jsonData.js */

export let jsonData = {  // 声明变量,存储数据
  // JSON源数据
}

2、组件内引入js文件,读取数据

/* Example.vue */

import { jsonData } from '/jsonData.js'  // 引入js文件中的变量(注意文件路径)
export default {
  data() {
    return {
      data: jsonData  // 读取数据(引入完毕)
    }
  },
  created() {
    console.log(this.data)  // 可进行其他操作
  }
}

http://www.kler.cn/a/233419.html

相关文章:

  • 2024 年 8 个最佳 API 设计工具图文介绍
  • 10款PDF合并工具的使用体验与推荐!!!
  • PHP搭建开发环境(Windows系统)
  • 鸿蒙next版开发:订阅应用事件(ArkTS)
  • 深入剖析【C++继承】:单一继承与多重继承的策略与实践,解锁代码复用和多态的编程精髓,迈向高级C++编程之旅
  • NCC前端调用查询弹框
  • c++学习:命名空间
  • C++ 中的模型预测控制(01/2)
  • python 动态数据 展示 ,数据是由51单片机发送过来的,温度传感器。
  • 【QT+QGIS跨平台编译】之三十二:【MiniZip+Qt跨平台编译】(一套代码、一套框架,跨平台编译)
  • 【前后端接口AES+RSA混合加解密详解(vue+SpringBoot)附完整源码】
  • [软件工具]文档页数统计工具软件pdf统计页数word统计页数ppt统计页数图文打印店快速报价工具
  • K8S容器挂了后重启状态正常,但应用无法访问排查处理
  • TELNET 远程终端协议
  • “OLED屏幕,色彩绚丽,画面清晰,让每一帧都生动无比。“#IIC协议【上】
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Slider组件
  • CentOS 7安装Nodejs
  • 微信小程序上传代码教程
  • 2024/2最新升级ChatGPT Plus的方法
  • 堆排序----C语言数据结构
  • 股票均线的使用方法和实战技术,看涨看空的均线形态与案例教学
  • VisaulStudio2022下用VB.net实现socket与西门子PLC进行通讯案例(优化版)
  • QT初始程序
  • 设计模式-建造者模式Builder
  • uniapp的配置和使用
  • 【C语言】变量与常量