使用axios 异步显示数据到页面

Posted 2020-11-27 Rzk

引入所需要的js文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--v-clock: 解决闪烁问题-->
<style>
    [v-clock]{
        display: none;
    }
</style>

json文件

  json文件在这个页面里面
  https://www.cnblogs.com/rzkwz/p/12830917.html

编写js

<script type="text/javascript">
//通过new Vue 可以声明全局变量,new返回的对象就是应用对象
var vm = new Vue({
    //el:相当于js的element
    el: \'#vue\',
    data() {
        return{
            info:{
                name:null,
                address:{
                    street:null,
                },
                links:[
                    {
                        name:null,
                        url:null
                    },
                    {
                        name:null,
                        url:null
                    },
                    {
                        name:null,
                        url:null
                    }
                ]
            }
        }
    },
    mounted(){
        // data.json的数据
        axios.get(\'../data.json\').then(response=>{
            this.info=response.data;
            });
    }
});

从data的数据显示到页面上

  <div id="vue">
          <div>
              {{info.name}}
              {{info.url}}
              {{info.isNonprofit}}
              {{info.links[0].name}}
              {{info.links[1].name}}
              {{info.links[2].name}}
          </div>
      <!--连接同理也是一样要加下标,在加   v-bind 进行绑定-->
      <a v-bind:href="info.links[0].url">鏈接1</a>
      <a v-bind:href="info.links[1].url">鏈接2</a>
      <a v-bind:href="info.links[2].url">鏈接3</a>
  </div>

页面效果

  ![](https://img2020.cnblogs.com/blog/1898315/202005/1898315-20200505161317676-1242553608.jpg)