vue使用json最简单的两种方式分享

使用json最简单方式

第一种

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

在public文件夹下创建jsonTest.json

json 格式的数据如下：

{
    “innerList”: [
        {"attr1":"内部数据1","attr2":"内部数据2",...},
        {"attr1":"内部数据1","attr2":"内部数据2",...},
        ....
    ]
}

在某一组件内：

......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数据做具体赋值操作
 }).catch(() => {
        response.errer
                    this.$message({
                        message: response.errer.msg
                    })
                })

vue使用json假数据

第一种json数据写在js文件中直接引入使用

直接将json数据引入页面中

然后作为 data 数据返回出去、

//citidata.js  中导出数据
export default [
{
  children: [
    {
      value: '东城区',
      label: '东城区'
    },
    {
      value: '西城区',
      label: '西城区'
    }
 ]
}
]

第二种使用json-server ./xxx.json 使用 生成请求接口

@

随便写入一些假数据这后 在终端中需要输入命令json-server 路径.\data.json

比如d

会生成 数据的请求连接

promise的all用法 所有请求完成后执行

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程宝库。

 使用模拟的json数据查看效果在数据交互这一块，很多时候是要和后台进行沟通配合的，作为初学者或者纯前端的学习者，我们不可能经常有后台配合自己来展示，那么怎样才能模拟类似的效果呢？后台传来 ...