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

这篇文章主要介绍了vue使用json最简单的两种方式分享，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

目录

• 使用json最简单方式
• 第一种
• 第二种
• vue使用json假数据
• 第一种json数据写在js文件中直接引入使用
• 第二种使用json-server ./xxx.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用法 所有请求完成后执行

以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• vue如何实现Json格式数据展示
• vue如何加载本地json数据
• Vue-cli中post请求发送Json格式数据方式
• vue如何使用模拟的json数据查看效果
• vue中jsonp的使用方法
• vue获取后台json字符串方式