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

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)  // 可进行其他操作}
}

相关文章:

  • hive 创建表 字段类型
  • React+Antd实现省、市区级联下拉多选组件(支持只选省不选市)
  • 使用 git 上传文件时,运行 命令 git pull origin 时未成功,出现报错信息
  • Avalonia学习(二十三)-大屏
  • 【经典项目】Java实现打地鼠小游戏(附源码)
  • 8.Swift条件语句
  • 【0258】pg内核支持的所有 inval messages 类型
  • 悬而未决:daterangepicker设置默认选择日期时间后点确认无值的BUG
  • 5年前端仔的2023年终总结
  • 5-4、S加减单片机程序【51单片机+L298N步进电机系列教程】
  • 嵌入式Linux学习DAY19
  • windows安装MySQL 8.0.16
  • 为什么SpringBoot胖Jar不好
  • 【ASP.NET Core 基础知识】--前端开发--集成前端框架
  • 每日一题 递归遍历二叉树
  • 《Javascript数据结构和算法》笔记-「字典和散列表」
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • axios 和 cookie 的那些事
  • css属性的继承、初识值、计算值、当前值、应用值
  •  D - 粉碎叛乱F - 其他起义
  • Intervention/image 图片处理扩展包的安装和使用
  • java小心机(3)| 浅析finalize()
  • NLPIR语义挖掘平台推动行业大数据应用服务
  • spring boot下thymeleaf全局静态变量配置
  • SQLServer之创建数据库快照
  • webpack4 一点通
  • 纯 javascript 半自动式下滑一定高度,导航栏固定
  • 分布式事物理论与实践
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 排序(1):冒泡排序
  • 前端 CSS : 5# 纯 CSS 实现24小时超市
  • 自动记录MySQL慢查询快照脚本
  • Mac 上flink的安装与启动
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​力扣解法汇总946-验证栈序列
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • #100天计划# 2013年9月29日
  • #1014 : Trie树
  • #pragma data_seg 共享数据区(转)
  • $.ajax()
  • (007)XHTML文档之标题——h1~h6
  • (MATLAB)第五章-矩阵运算
  • (一)SpringBoot3---尚硅谷总结
  • (转) Android中ViewStub组件使用
  • (转)Linq学习笔记
  • (转)淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • (转载)hibernate缓存
  • .NET CF命令行调试器MDbg入门(三) 进程控制
  • .NET NPOI导出Excel详解
  • .net 提取注释生成API文档 帮助文档
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)
  • .Net6 Api Swagger配置
  • .Net6支持的操作系统版本(.net8已来,你还在用.netframework4.5吗)
  • .net快速开发框架源码分享