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

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

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

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

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

如果放在 public 文件夾中，可以通過相對路徑直接訪問。
如果放在 src/assets 文件夾中，需要通過 import 引入。

2. 引用 JSON 文件的方式

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

假設你的 JSON 文件名為 data.json，內容如下：

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

步驟：

將 data.json 放在 src/assets 文件夾中。
在 Vue 組件中通過 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>

說明：

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

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

如果 JSON 文件放在 public 文件夾中，可以使用 fetch 或 axios 動態(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 文件夾下的文件可以直接通過根路徑訪問
      .then((response) => response.json())
      .then((data) => {
        this.jsonData = data; // 將數(shù)據(jù)賦值給 jsonData
      })
      .catch((error) => {
        console.error('加載 JSON 文件失敗:', error);
      });
  },
};
</script>

說明：

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

3. 總結兩種方式的適用場景

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

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

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

您可能感興趣的文章: