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