vue项目如何读取本地json文件数据实例
作者：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数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！