vue3怎么读取本地json数据

news/2024/11/8 5:52:43/

在Vue 3中,可以使用fetch API或其他HTTP客户端来读取本地JSON数据。以下是一个使用fetch的示例:

<template><div><h1>本地JSON数据</h1><div v-if="data">{{ data }}</div></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const data = ref(null);const fetchLocalJson = async () => {try {const response = await fetch('path/to/your/local.json');if (!response.ok) {throw new Error('Network response was not ok ' + response.statusText);}data.value = await response.json();} catch (error) {console.error('Fetch error:', error);}};onMounted(() => {fetchLocalJson();});return {data,};},
};
</script>

在这里插入图片描述

确保将path/to/your/local.json替换为你的本地JSON文件的实际路径。这段代码使用了Vue 3的Composition API,在组件被挂载时,它会尝试获取并解析本地JSON文件,然后将数据存储在一个响应式变量中,以便在模板中使用。


http://www.ppmy.cn/news/1394669.html

相关文章

100 天机器学习指南

100 天机器学习指南 除了机器学习专栏&#xff0c;我们打算出另外一期专栏&#xff0c;叫做100 天机器学习指南&#xff0c;目标是通过100天的深入持续学习&#xff0c;让我们没有机器学习经验的人&#xff0c;也可以从事简单的机器学习工作&#xff0c;为职业生涯寻找增长点&…

redis优化--来自gpt

Redis是一种高性能的键值对数据库&#xff0c;广泛用于缓存、会话存储、排行榜等场景。尽管Redis本身性能卓越&#xff0c;但在实际使用过程中&#xff0c;根据数据量、访问模式和硬件环境的不同&#xff0c;仍然需要通过一些优化措施来确保最佳性能和资源利用率。以下是一些常…

11 React 组件通信 父传子

在React中实现组件通信是非常常见的需求&#xff0c;其中包括父子组件通信。以下是几种常见的父子组件通信的例子&#xff0c;以及需要注意的知识&#xff1a; Props传递&#xff1a; 这是最基本的父子组件通信方式。父组件通过props将数据传递给子组件。 // ParentComponent.j…

Polar 2024春季个人挑战赛 Jay17 WP

Polar 2024春季个人挑战赛 Rank&#xff1a;7 【WEB】机器人 开题 起手敏感文件robots.txt 【WEB】PHP反序列化初试 最简单的php反序列化 POC&#xff1a; <?php class Easy{public $name;public function __wakeup(){echo $this->name;} } class Evil{public $evi…

nodejs+vue高校洗浴管理系统python-flask-django-php

高校洗浴管理系统采用数据库是MySQL。网站的搭建与开发采用了先进的nodejs进行编写&#xff0c;使用了express框架。该系统从两个对象&#xff1a;由管理员和学生来对系统进行设计构建。主要功能包括&#xff1a;个人信息修改&#xff0c;对学生管理、浴室信息、浴室预约、预约…

Windows11 使用 VirtualBox 安装创建 Ubuntu虚拟机

〇、背景 开发者大比例习惯都是Windows下编辑代码&#xff0c;比如使用Windows的Visual Studio Code进行代码的开发。但不管是AOSP还是鸿蒙开发&#xff0c;目前都不支持windows本地环境编译的&#xff0c;建议使用Ubuntu操作系统环境对源码进行编译。 因此&#xff0c;没有U…

【Web】NKCTF 2024 个人wp(部分)

目录 my first cms 全世界最简单的CTF attack_tacooooo 属实太菜了&#xff0c;3/4 my first cms 一眼搜版本2.2.19 CVE -CVE-2024-27622 GitHub - capture0x/CMSMadeSimple 访问/admin/login.php 爆出弱口令&#xff0c;后台登录 admin Admin123 Extensions > User D…

蓝桥杯每日一题(拓扑排序)

//3696构造有向无环图 有向无环图才有拓扑排序&#xff0c;有环的话不能进行拓扑&#xff0c;因为会导致环中一个结点&#xff08;环的入口位置&#xff09;其入度永远无法变成0。 先判断图是否可拓扑序&#xff0c;如果本来就不能就直接No&#xff0c;可以的话。可以按照拓扑…