vue如何加載本地json數(shù)據(jù)

更新時間：2022年04月07日 08:49:59 作者：dengdengchen

這篇文章主要介紹了vue如何加載本地json數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue加載本地json數(shù)據(jù)

json數(shù)據(jù)存放在除static靜態(tài)文件夾中

這種方法暫時還沒出來，若有大神知道，可否能指導(dǎo)一二

json數(shù)據(jù)存放在static靜態(tài)文件夾中

1、編寫好json 數(shù)據(jù)，按照這個格式編寫json數(shù)據(jù)

2、安裝axios 安裝方法：npm install axios

3、配置axios，在main.js中引用axios，如下圖所示

4、就可以調(diào)用json數(shù)據(jù)了，也可以加上一句：console.log(this.fieldParams)在控制臺打印數(shù)據(jù)

表格代碼：

<el-table
      :data="fieldParams"
      border
      style="width:100%"
    >
</el-table>

讀取本地json文件并分頁顯示

功能實現(xiàn)

通過axios異步加載技術(shù)讀取本地的json文件內(nèi)容，并通過vue.js處理數(shù)據(jù)在h5頁面分頁顯示（這里以3行數(shù)據(jù)分頁）

student.json數(shù)據(jù)如下

[
  {"stuId":1,"stuName":"李華","stuSex":"男","stuAge":20},
  {"stuId":2,"stuName":"張國偉","stuSex":"男","stuAge":22},
  {"stuId":3,"stuName":"劉艷","stuSex":"女","stuAge":19},
  {"stuId":4,"stuName":"李小燕","stuSex":"女","stuAge":22},
  {"stuId":5,"stuName":"張鵬","stuSex":"男","stuAge":26},
  {"stuId":6,"stuName":"李曄","stuSex":"女","stuAge":20},
  {"stuId":7,"stuName":"錢國強","stuSex":"男","stuAge":21},
  {"stuId":8,"stuName":"張三","stuSex":"男","stuAge":22},
  {"stuId":9,"stuName":"唐毓民","stuSex":"男","stuAge":25},
  {"stuId":10,"stuName":"瑪麗亞","stuSex":"女","stuAge":21},
  {"stuId":11,"stuName":"李家明","stuSex":"男","stuAge":21}
]

h5代碼如下

<body>
  <div id ="app" v-cloak>
    <table border="1px" style="width: 400px;" class="table table-striped table-bordered table-hover table-condensed">
      <thead>
         <tr>
           <th>序號</th>
           <th>姓名</th>
           <th>性別</th>
           <th>年齡</th>
         </tr>
      </thead>
     <tr v-for="student in stuData">
       <td>{{ student.stuId }}</td>
       <td>{{ student.stuName }}</td>
       <td>{{ student.stuSex }}</td>
       <td>{{ student.stuAge }}</td>
     </tr>
    </table>
    <!-- 用無序列表做一個頁碼導(dǎo)航條-->
    <ul>
      <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="prePage"> < </a></li>
      <li v-for="(value,index) in pageNumber">
       <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="thisPage(index)">{{ index+1 }}</a>
      </li>
      <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="nextPage"> > </a></li>
    </ul>
  </div>
</body>

css樣式

<style>
  [v-cloak]{
    display: none;
  }
  ul{
   margin-left: 20px;
  }
  ul li{
    float: left;
    list-style: none;
    background-color: aqua;
  }
  ul li a{
    text-decoration: none;
    padding: 5px 15px;
    color:black;
    border: 1px solid white;
  }
  a:hover{
    background: tomato;
  }
</style>

js代碼

<script>
   //創(chuàng)建Vue實例,得到 ViewModel
   var app = new Vue({
    el: '#app',
    data: {
     list:[],
     pageSize:3,//每頁大小
     currentPage:0 //當(dāng)前頁碼
    },/*數(shù)據(jù)*/
    mounted(){
     //異步加載json數(shù)據(jù)
     axios.get('/json/student.json',{}).then(function(response){
      app.list=response.data;
     });
    },/*自動加載函數(shù)*/
    methods: {
      //上一頁
      nextPage: function(){
            if (this.currentPage == this.pageNumber - 1) return;
            this.currentPage++;
        },
        //下一頁
        prePage: function(){
            if (this.currentPage == 0) return;
            this.currentPage--;
        },
        //頁碼
        thisPage: function(index){
           this.currentPage = index;
        }
    },/*執(zhí)行觸發(fā)函數(shù)*/
    computed: {
      //分頁數(shù)據(jù)
      stuData: function(){
            let left = this.currentPage*this.pageSize;
            let right = Math.min((this.currentPage+1)*this.pageSize, this.list.length)
            return this.list.slice(left, right);//取出一頁數(shù)據(jù)
        },
        //共有多少頁
        pageNumber: function(){
            if(this.list.length<=this.pageSize){
            return 1;
          }
            return Math.ceil(this.list.length / this.pageSize);
        }
    },/*動態(tài)計算屬性*/
   });
  </script>