Vue学习（6）Axios异步通信

最新推荐文章于 2024-09-08 17:25:02 发布

Fantasieszyh

最新推荐文章于 2024-09-08 17:25:02 发布

阅读量122

点赞数 1

分类专栏： Vue学习文章标签： vue vue.js html html5 jquery

本文链接：https://blog.csdn.net/qq_43414301/article/details/108555023

版权

Vue学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

data.json中放json数据
通过钩子函数去读取数据

data.json

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

demo5.html

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue">
     <div>{{info.name}}</div>
     <div>{{info.address.street}}</div>

    <a v-bind:href="info.url">点我</a>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',

        data(){
            return {
                info: {
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        street: null
                    },
                    url: null
                }
            }
        },
        mounted(){
            axios
                .get('../data.json')
                .then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

Fantasieszyh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（6）Axios异步通信

data.json中放json数据通过钩子函数去读取数据data.json{ "name":"狂神说java", "url": "http://baidu.com", "page": "1", "isNonProfit":"true", "address": { "street": "含光门", "city":"陕西西安", "country": "中国" }, "links": [ { "name": "B站", .
复制链接

扫一扫

专栏目录