快捷導(dǎo)航

Vue動(dòng)態(tài)引用json數(shù)據(jù)的兩種方式

更新時(shí)間：2025年04月01日 08:31:58 作者：還是大劍師蘭特

在 Vue 項(xiàng)目中引用 JSON 文件非常簡(jiǎn)單,尤其是當(dāng)文件內(nèi)容是一個(gè)數(shù)組時(shí),本文給大家介紹了Vue動(dòng)態(tài)引用json數(shù)據(jù)的兩種方式,并有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下

1. 將 JSON 文件放在合適的位置

通常會(huì)將 JSON 文件放在 public 或 src/assets 目錄下：

如果放在 public 文件夾中，可以通過(guò)相對(duì)路徑直接訪問(wèn)。
如果放在 src/assets 文件夾中，需要通過(guò) import 引入。

2. 引用 JSON 文件的方式

方式一：使用 import 引入（推薦）

假設(shè)你的 JSON 文件名為 data.json，內(nèi)容如下：

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" },
  { "id": 3, "name": "Charlie" }
]

步驟：

將 data.json 放在 src/assets 文件夾中。
在 Vue 組件中通過(guò) import 引入并使用。

代碼示例：

<template>
  <div>
    <h3>JSON 數(shù)據(jù)列表</h3>
    <ul>
      <li v-for="item in jsonData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
// 引入 JSON 文件
import jsonData from '@/assets/data.json';

export default {
  data() {
    return {
      jsonData, // 將 JSON 數(shù)據(jù)綁定到組件的 data 中
    };
  },
};
</script>

說(shuō)明：

@ 是 Webpack 的別名，表示 src 文件夾。
JSON 文件會(huì)被自動(dòng)解析為 JavaScript 對(duì)象或數(shù)組。

方式二：通過(guò) fetch 或 axios 動(dòng)態(tài)加載

如果 JSON 文件放在 public 文件夾中，可以使用 fetch 或 axios 動(dòng)態(tài)加載。

步驟：

將 data.json 放在 public 文件夾中。
使用 fetch 或 axios 加載 JSON 文件。

代碼示例：

<template>
  <div>
    <h3>JSON 數(shù)據(jù)列表</h3>
    <ul>
      <li v-for="item in jsonData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonData: [], // 初始化為空數(shù)組
    };
  },
  mounted() {
    // 使用 fetch 加載 JSON 文件
    fetch('/data.json') // public 文件夾下的文件可以直接通過(guò)根路徑訪問(wèn)
      .then((response) => response.json())
      .then((data) => {
        this.jsonData = data; // 將數(shù)據(jù)賦值給 jsonData
      })
      .catch((error) => {
        console.error('加載 JSON 文件失敗:', error);
      });
  },
};
</script>

說(shuō)明：

public 文件夾中的文件不會(huì)被 Webpack 處理，而是直接復(fù)制到構(gòu)建目錄中，因此可以通過(guò)根路徑訪問(wèn)。
如果使用 axios，代碼類似，只需將 fetch 替換為 axios.get。

3. 總結(jié)兩種方式的適用場(chǎng)景

import 方式：
- 適用于靜態(tài)數(shù)據(jù)，數(shù)據(jù)在編譯時(shí)確定。
- 數(shù)據(jù)會(huì)被打包進(jìn)最終的 JavaScript 文件中。
fetch 或 axios 方式：
- 適用于動(dòng)態(tài)加載的數(shù)據(jù)，或者 JSON 文件較大、不需要每次都加載的情況。
- 數(shù)據(jù)不會(huì)被打包進(jìn) JavaScript 文件中，而是運(yùn)行時(shí)從服務(wù)器加載。

根據(jù)你的需求選擇合適的方式！

到此這篇關(guān)于Vue動(dòng)態(tài)引用json數(shù)據(jù)的兩種方式的文章就介紹到這了,更多相關(guān)Vue引用json數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: