vue+Axios

2022-07-07 09:31:45 阅读：109 来源： 互联网

标签：info Axios name url data vue https com

1.可以构造一个参数来装获得的后端数据

2.生命周期

测试代码：

1.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/"
    }
  ]
}
2.前端代码文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    名字：<div>{{info.name}}</div><br>
    链接：<a :href="info.url">url</a><br>
    页数：<div>{{info.page}}</div><br>
    地址：<div>{{info.address.city}}</div><br>
<!--    info.links不要忘记-->
    链接表：<li v-for="link in info.links">
    名字：{{link.name}}<br>
    url:<a :href="link.url">{{link.url}}</a>
</li>
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var mv=new Vue({
        el:"#app",
        data:{
            info:null
        },
        // data(){
        //     return{
        //         info:null
        //     }
        //
        // },
        //this别忘了
        mounted(){
            axios.get('test.json').then(response =>(this.info=response.data))
        }
    });
</script>
</html>
测试结果：

标签：info,Axios,name,url,data,vue,https,com
来源： https://www.cnblogs.com/zcz666/p/16436773.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue+Axios