返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue使用json最简单的两种方式分享
  • 731
分享到

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

2024-04-02 19:04:59 731人浏览 泡泡鱼
摘要

目录使用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用法 所有请求完成后执行

在这里插入图片描述

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

--结束END--

本文标题: vue使用json最简单的两种方式分享

本文链接: https://lsjlt.com/news/144648.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作