vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)實(shí)例
更新時(shí)間：2023年06月27日 10:55:25 作者：2301_76433421
很多時(shí)候我們需要從本地讀取JSON文件里面的內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
Vue項(xiàng)目讀取本地json文件數(shù)據(jù)的方法如下：
創(chuàng)建一個(gè)json文件，比如data.json，并保存在項(xiàng)目目錄下的static文件夾里
在Vue組件中引入json文件，例如：
<script>
import data from '@/static/data.json'
export default {
data() {
return {
jsonData: data
}
}
}
</script>在模板中使用json數(shù)據(jù)：
<template>
<div>
<p v-for="item in jsonData">{{ item }}</p>
</div>
</template>注意：讀取本地json文件時(shí)需要在開發(fā)環(huán)境下運(yùn)行，因?yàn)殪o態(tài)文件只能在開發(fā)服務(wù)器中訪問。
關(guān)于實(shí)現(xiàn)Vue中對json數(shù)據(jù)進(jìn)行查詢
computed: { //計(jì)算，數(shù)據(jù)緩存更改一次，數(shù)據(jù)刷新一次
// 模糊搜索
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
}
},總結(jié)
到此這篇關(guān)于vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue讀取本地json數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一，它是html、css、js等的一個(gè)聚合體，封裝性和隔離性非常強(qiáng)2022-12-12
這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue3 + Element Plus 省市區(qū)縣級聯(lián)組件封裝,支持 v
本文介紹了如何封裝一個(gè)支持省市區(qū)三級聯(lián)動(dòng)的通用復(fù)用組件,實(shí)現(xiàn)v-model雙向綁定、數(shù)據(jù)回顯、清空、禁用聯(lián)動(dòng)等功能,提高開發(fā)效率和項(xiàng)目可維護(hù)性,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2026-04-04
vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽，具名插槽，作用域插槽是vue中常用的三個(gè)插槽，這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
vue發(fā)送websocket請求和http post請求的實(shí)例代碼
這篇文章主要介紹了vue發(fā)送websocket請求和http post請求的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue+webpack實(shí)現(xiàn)異步組件加載的方法
下面小編就為大家分享一篇vue+webpack實(shí)現(xiàn)異步組件加載的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
這篇文章主要介紹了vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了vue2里面ref的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10