欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用json最簡(jiǎn)單的兩種方式分享

 更新時(shí)間：2022年03月31日 15:31:19   作者：得淼  
這篇文章主要介紹了vue使用json最簡(jiǎn)單的兩種方式分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用json最簡(jiǎn)單方式

第一種

首先我項(xiàng)目是在 webpack 下搭建的vue項(xiàng)目

在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ù)引入頁(yè)面中

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

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

在這里插入圖片描述

第二種使用json-server ./xxx.json 使用 生成請(qǐng)求接口

在這里插入圖片描述

@

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

比如d

在這里插入圖片描述

在這里插入圖片描述

會(huì)生成 數(shù)據(jù)的請(qǐng)求連接

在這里插入圖片描述

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

在這里插入圖片描述

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

相關(guān)文章

最新評(píng)論