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

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

这篇文章主要介绍了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用法所有请求完成后执行

在这里插入图片描述

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue
json

vue动态绑定多个class以及带上三元运算或其他条件
这篇文章主要介绍了vue动态绑定多个class以及带上三元运算或其他条件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
浅析vue.js数组的变异方法
本篇文章给大家分享了vue.js数组的变异方法的相关内容，有兴趣的朋友跟着学习参考下。
2018-06-06
vue3中echarts的tooltip组件不显示问题及解决
这篇文章主要介绍了vue3中echarts的tooltip组件不显示问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
这篇文章主要介绍了为什么Vue3.0使用Proxy实现数据监听？defineProperty表示不背这个锅，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Vue生产环境调试的方法步骤
开发环境下Vue会提供很多警告来帮你对付常见的错误与陷阱,而在生产环境下,这些警告语句却没有用,反而会增加应用的体积,下面这篇文章主要给大家介绍了关于Vue生产环境调试的方法步骤,需要的朋友可以参考下
2022-04-04
vuex如何修改状态state的方法
这篇文章主要介绍了vuex如何修改状态state的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Vue实现简单计算器案例
这篇文章主要为大家详细介绍了Vue实现简单计算器案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
Vue中使用webpack别名的方法实例详解
本文通过实例给大家介绍了Vue中使用webpack别名的方法,非常不错，具体一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
vue 弹窗时监听手机返回键关闭弹窗功能(页面不跳转)
这篇文章主要介绍了vue 弹窗时监听手机返回键关闭弹窗功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值(页面不跳转) ,需要的朋友可以参考下
2019-05-05
vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程
这篇文章主要介绍了vue3+ts+element-plus实际开发之统一调用弹窗封装的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03