快捷導(dǎo)航

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中對(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 Class Component類組件用法
這篇文章主要介紹了Vue Class Component類組件用法，組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一，它是html、css、js等的一個(gè)聚合體，封裝性和隔離性非常強(qiáng)
2022-12-12
超簡單的Vue.js環(huán)境搭建教程
這篇文章主要為大家分享了一份超簡單的Vue.js環(huán)境搭建教程，幫助大家快速搭建vue環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue3 + Element Plus 省市區(qū)縣級(jí)聯(lián)組件封裝,支持 v
本文介紹了如何封裝一個(gè)支持省市區(qū)三級(jí)聯(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請(qǐng)求和http post請(qǐng)求的實(shí)例代碼
這篇文章主要介紹了vue發(fā)送websocket請(qǐng)求和http post請(qǐng)求的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-07-07
深入理解vue中的$set
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
vue+webpack實(shí)現(xiàn)異步組件加載的方法
下面小編就為大家分享一篇vue+webpack實(shí)現(xiàn)異步組件加載的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
這篇文章主要介紹了vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue2里面ref的具體使用方法
本篇文章主要介紹了vue2里面ref的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10