使用axios 異步顯示數據到頁面

引入所需要的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)