vue使用json最簡單的兩種方式分享

更新時間：2022年03月31日 15:31:19 作者：得淼

這篇文章主要介紹了vue使用json最簡單的兩種方式分享，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用json最簡單方式

第一種

首先我項目是在 webpack 下搭建的vue項目

在public文件夾下創(chuàng)建jsonTest.json

json 格式的數(shù)據(jù)如下：

{
?? ?“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  中導出數(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í)行

在這里插入圖片描述

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

您可能感興趣的文章:

vue
json

相關(guān)文章

Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-06-06
Vue數(shù)據(jù)雙向綁定的實現(xiàn)方式講解
Vue數(shù)據(jù)雙向綁定原理：Vue內(nèi)部通過Object.defineProperty方法屬性攔截的方式，把data對象里每個數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當數(shù)據(jù)變化時通知視圖更新
2022-08-08
vue 手機物理監(jiān)聽鍵+退出提示代碼
這篇文章主要介紹了vue 手機物理監(jiān)聽鍵+退出提示代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue3中的hook簡單封裝
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信(實施方案)
這篇文章主要介紹了vue+electron實現(xiàn)創(chuàng)建多窗口及窗口間的通信,本文給大家分享實施方案結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-09-09
解決elementui中NavMenu導航菜單高亮問題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導航菜單高亮問題(解決多種情況)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue 在服務(wù)器端直接修改請求的接口地址
這篇文章主要介紹了vue 在服務(wù)器端直接修改請求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
Vue中computed屬性和watch,methods的區(qū)別
本文主要介紹了Vue中computed屬性和watch,methods的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
Vue 自定義指令功能完整實例
這篇文章主要介紹了Vue 自定義指令功能,結(jié)合完整實例形式分析了vue.js自定義指令相關(guān)實現(xiàn)與使用操作技巧,需要的朋友可以參考下
2019-09-09
npm?install時卡住不動的五種解決方法
在我們安裝完Node.js之后,需要使用npm命令來安裝一些工具,下面這篇文章主要給大家介紹了關(guān)于npm?install時卡住不動的五種解決方法,需要的朋友可以參考下
2023-06-06