基于vue.js及axios.js下获取json文件数据的基本实例

最新推荐文章于 2023-12-25 13:53:59 发布

风飞扬fq

最新推荐文章于 2023-12-25 13:53:59 发布

阅读量1.5k

点赞数

分类专栏：前端笔记文章标签： vue javascript

本文链接：https://blog.csdn.net/fq_fly/article/details/103652343

版权

前端笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

基于vue框架异步获取json文件实例

准备js文件

下载好两个js文件于本地目录，此处本人放于vue-js目录下，前端加载js文件如下。

<script src="./vue-js/vue.min.js"></script>
<script src="./vue-js/axios.min.js"></script>

本地准备好json文件，此处命名为data.json，具体数据如下。

{
  "student": {
    "name": "feiy",
    "sex": "male",
    "age": "18",
    "job": "agineer"
  },
  "superstar": {
    "name": "MM",
    "sex": "female",
    "age": "20",
    "job": "signer"
  }
}

创建根实例，具体js代码如下。

var vm = new Vue({
        el:'#myapp',
        data(){
            return {
                info:'null'
            }
        },
        mounted(){
            axios
                .get('data.json')
                .then(response=>(this.info=response.data))
                .catch(function (error) {//请求失败处理
                    alert(error)
                })
        }
    });

上述代码中，通过调用axios.min.js中的get方法向文件请求数据；数据的响应为response，通过代码this.info=response.data获取具体的数据。
前端html只需根据后端所提供的数据接口对应显示即可
整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从本地tsconfig.json文件读取具体数据</title>
    <script src="./vue-js/vue.min.js"></script>
    <script src="./vue-js/axios.min.js"></script>
    <link rel="stylesheet" href="./vue-css/bootstrap.css">
</head>
<body>
<div id="myapp">
    <ol>
        <li>{{info.student.name}}</li>
        <li>{{info.student.sex}}</li>
        <li>{{info.student.age}}</li>
        <li>{{info.student.job}}</li>
    </ol>
    <ol>
        <li>{{info.superstar.name}}</li>
        <li>{{info.superstar.sex}}</li>
        <li>{{info.superstar.age}}</li>
        <li>{{info.superstar.job}}</li>
    </ol>
    <p>v-for循环列表数据</p>
    <div v-for="site in info">
        {{site}}
    </div>
</div>
<script>
    var vm = new Vue({
        el:'#myapp',
        data(){
            return {
                info:'null'
            }
        },
        mounted(){
            axios
                .get('data.json')
                .then(response=>(this.info=response.data))
                .catch(function (error) {//请求失败处理
                    alert(error)
                })
        }
    });
</script>
</body>
</html>

测试结果

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

在这里插入图片描述

风飞扬fq

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于vue.js及axios.js下获取json文件数据的基本实例

基于vue框架异步获取json文件实例准备js文件下载好两个js文件于本地目录，此处本人放于vue-js目录下，前端加载js文件如下。<script src="./vue-js/vue.min.js"></script><script src="./vue-js/axios.min.js"></script>本地准备好json文件，...
复制链接

扫一扫