vue项目如何读取本地json文件数据实例
更新时间：2023年06月27日 10:55:25 作者：2301_76433421
很多时候我们需要从本地读取JSON文件里面的内容,这篇文章主要给大家介绍了关于vue项目如何读取本地json文件数据的相关资料,需要的朋友可以参考下
Vue项目读取本地json文件数据的方法如下：
创建一个json文件，比如data.json，并保存在项目目录下的static文件夹里
在Vue组件中引入json文件，例如：
<script>
import data from '@/static/data.json'
export default {
data() {
return {
jsonData: data
}
}
}
</script>在模板中使用json数据：
<template>
<div>
<p v-for="item in jsonData">{{ item }}</p>
</div>
</template>注意：读取本地json文件时需要在开发环境下运行，因为静态文件只能在开发服务器中访问。
关于实现Vue中对json数据进行查询
computed: { //计算，数据缓存更改一次，数据刷新一次
// 模糊搜索
tables () {
const search = this.search
if (search) {
return this.dormitory.filter(data => {
return Object.keys(data).some(key => {
return String(data[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.dormitory
}
},总结
到此这篇关于vue项目如何读取本地json文件数据的文章就介绍到这了,更多相关vue读取本地json数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue Class Component类组件用法，组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强2022-12-12
这篇文章主要为大家分享了一份超简单的Vue.js环境搭建教程，帮助大家快速搭建vue环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
Vue3 + Element Plus 省市区县级联组件封装,支持 v
本文介绍了如何封装一个支持省市区三级联动的通用复用组件,实现v-model双向绑定、数据回显、清空、禁用联动等功能,提高开发效率和项目可维护性,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2026-04-04
vue中三种插槽(默认插槽/具名插槽/作用域插槽)的区别详解
默认插槽，具名插槽，作用域插槽是vue中常用的三个插槽，这篇文章主要为大家介绍了这三种插槽的使用与区别，感兴趣的小伙伴可以了解一下2023-08-08
vue发送websocket请求和http post请求的实例代码
这篇文章主要介绍了vue发送websocket请求和http post请求的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
下面小编就为大家分享一篇vue+webpack实现异步组件加载的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue 实现弹窗关闭后刷新效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
解决Echarts2竖直datazoom滑动后显示数据不全的问题
这篇文章主要介绍了解决Echarts2竖直datazoom滑动后显示数据不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要介绍了vue2里面ref的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论