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í)需要在開(kāi)發(fā)環(huán)境下運(yùn)行，因?yàn)殪o態(tài)文件只能在開(kāi)發(fā)服務(wù)器中訪問(wèn)。
關(guān)于實(shí)現(xiàn)Vue中對(duì)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Django+Vue.js搭建前后端分離項(xiàng)目的示例
本篇文章主要介紹了Django+Vue.js搭建前后端分離項(xiàng)目的示例，具有一定參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Vite批量導(dǎo)入模塊/資源的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue自定義元素身上的右鍵事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項(xiàng)目使用.env文件配置全局環(huán)境變量的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue.js組件tree實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形菜單
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)無(wú)限級(jí)樹(shù)形菜單代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了基于vue-video-player自定義播放器的方法，主要是基于video.js開(kāi)發(fā)的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以參考下2018-03-03
Vue實(shí)現(xiàn)封裝樹(shù)狀圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)封裝樹(shù)狀圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
ref用來(lái)輔助我們獲取DOM元素或組件的引用實(shí)例對(duì)象,每個(gè)vue的組件實(shí)例上,都包含一個(gè)refs對(duì)象,里面存儲(chǔ)著對(duì)應(yīng)的DOM元素或組件的引用,默認(rèn)情況下,組件的refs指向一個(gè)空對(duì)象2023-03-03
隨著vue3.4版本的發(fā)布,defineModel也正式轉(zhuǎn)正了,它可以簡(jiǎn)化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實(shí)現(xiàn)方式,下面就跟隨小編一起深入了解一下defineModel的使用吧2024-02-02