Vue动态引用json数据的两种方式
作者：还是大剑师兰特
在 Vue 项目中引用 JSON 文件非常简单,尤其是当文件内容是一个数组时,本文给大家介绍了Vue动态引用json数据的两种方式,并有相关的代码示例供大家参考,需要的朋友可以参考下
1. 将 JSON 文件放在合适的位置
通常会将 JSON 文件放在 public 或 src/assets 目录下：
- 如果放在
public文件夹中，可以通过相对路径直接访问。 - 如果放在
src/assets文件夹中，需要通过import引入。
2. 引用 JSON 文件的方式
方式一：使用 import 引入（推荐）
假设你的 JSON 文件名为 data.json，内容如下：
[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" },
{ "id": 3, "name": "Charlie" }
]
步骤：
- 将
data.json放在src/assets文件夹中。 - 在 Vue 组件中通过
import引入并使用。
代码示例：
<template>
<div>
<h3>JSON 数据列表</h3>
<ul>
<li v-for="item in jsonData" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
// 引入 JSON 文件
import jsonData from '@/assets/data.json';
export default {
data() {
return {
jsonData, // 将 JSON 数据绑定到组件的 data 中
};
},
};
</script>
说明：
@是 Webpack 的别名，表示src文件夹。- JSON 文件会被自动解析为 JavaScript 对象或数组。
方式二：通过 fetch 或 axios 动态加载
如果 JSON 文件放在 public 文件夹中，可以使用 fetch 或 axios 动态加载。
步骤：
- 将
data.json放在public文件夹中。 - 使用
fetch或axios加载 JSON 文件。
代码示例：
<template>
<div>
<h3>JSON 数据列表</h3>
<ul>
<li v-for="item in jsonData" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
jsonData: [], // 初始化为空数组
};
},
mounted() {
// 使用 fetch 加载 JSON 文件
fetch('/data.json') // public 文件夹下的文件可以直接通过根路径访问
.then((response) => response.json())
.then((data) => {
this.jsonData = data; // 将数据赋值给 jsonData
})
.catch((error) => {
console.error('加载 JSON 文件失败:', error);
});
},
};
</script>
说明：
public文件夹中的文件不会被 Webpack 处理，而是直接复制到构建目录中，因此可以通过根路径访问。- 如果使用
axios，代码类似，只需将fetch替换为axios.get。
3. 总结两种方式的适用场景
import方式：- 适用于静态数据，数据在编译时确定。
- 数据会被打包进最终的 JavaScript 文件中。
fetch或axios方式：- 适用于动态加载的数据，或者 JSON 文件较大、不需要每次都加载的情况。
- 数据不会被打包进 JavaScript 文件中，而是运行时从服务器加载。
根据你的需求选择合适的方式！
到此这篇关于Vue动态引用json数据的两种方式的文章就介绍到这了,更多相关Vue引用json数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！