{
?? ?“innerList”: [
?? ??? ?{"attr1":"內(nèi)部數(shù)據(jù)1","attr2":"內(nèi)部數(shù)據(jù)2",...},
?? ??? ?{"attr1":"內(nèi)部數(shù)據(jù)1","attr2":"內(nèi)部數(shù)據(jù)2",...},
?? ??? ?....
?? ?]
}

在某一組件內(nèi)：

......html元素

import people from '../../json/jsonTest.json';
?
export default{
?? ?data(){
?? ??? ?return {
?? ??? ??? ?dataset: people.innerList
?? ??? ?}
?? ?}
}

第二種

getDataList(){
?this.$axios.get("/json/jsonTest.json").then((res)=>{
?//得到response.data數(shù)據(jù)做具體賦值操作
?}).catch(() => {
?? ??? ?response.errer
? ? ? ? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ? ? ? ? message: response.errer.msg
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })

vue使用json假數(shù)據(jù)

第一種json數(shù)據(jù)寫在js文件中直接引入使用

直接將json數(shù)據(jù)引入頁面中

然后作為 data 數(shù)據(jù)返回出去、

//citidata.js  中導(dǎo)出數(shù)據(jù)
export default [
  {
    children: [
      {
        value: '東城區(qū)',
        label: '東城區(qū)'
      },
      {
        value: '西城區(qū)',
        label: '西城區(qū)'
      }
   ]
  }
 ]

在這里插入圖片描述

第二種使用json-server ./xxx.json 使用生成請求接口

在這里插入圖片描述

@

隨便寫入一些假數(shù)據(jù)這后在終端中需要輸入命令json-server 路徑.\data.json

比如d

在這里插入圖片描述

會生成數(shù)據(jù)的請求連接

在這里插入圖片描述

promise的all用法所有請求完成后執(zhí)行

在這里插入圖片描述

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
json

相關(guān)文章

查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法
這篇文章主要大家介紹了查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法,文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-11-11
Vue動態(tài)組件與異步組件實(shí)例詳解
這篇文章主要介紹了Vue動態(tài)組件與異步組件,結(jié)合實(shí)例形式分析了動態(tài)組件與異步組件相關(guān)概念、功能及使用技巧,需要的朋友可以參考下
2019-02-02
vue實(shí)現(xiàn)公告欄文字上下滾動效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)公告欄文字上下滾動效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
基于webpack4+vue-cli3項(xiàng)目實(shí)現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項(xiàng)目的換膚功能,文中是通過scss+style-loader/useable做換膚功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
如何用Vite構(gòu)建工具快速創(chuàng)建Vue項(xiàng)目
Vite是一個(gè)web開發(fā)構(gòu)建工具,由于其原生?ES?模塊導(dǎo)入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關(guān)于如何用Vite構(gòu)建工具快速創(chuàng)建Vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2022-05-05
以v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件
這篇文章主要介紹了vue彈窗組件之兩種方式v-model與promise,每種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
Vue項(xiàng)目實(shí)現(xiàn)html5圖片上傳的示例代碼
本文主要介紹了Vue項(xiàng)目?html5圖片上傳，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
基于Vue實(shí)現(xiàn)頁面切換左右滑動效果
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)頁面切換左右滑動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
web前端vue之CSS過渡效果示例
本篇文章主要介紹了web前端vue之CSS過渡效果示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
給vue項(xiàng)目添加ESLint的詳細(xì)步驟
本篇文章主要介紹了給vue項(xiàng)目添加ESLint的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09