溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“vue怎么加載本地json數(shù)據(jù)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue怎么加載本地json數(shù)據(jù)”吧!
這種方法暫時(shí)還沒(méi)出來(lái)，若有大神知道，可否能指導(dǎo)一二
1、編寫(xiě)好json 數(shù)據(jù)，按照這個(gè)格式編寫(xiě)json數(shù)據(jù)
2、安裝axios 安裝方法：npm install axios
3、配置axios，在main.js中引用axios，如下圖所示
4、就可以調(diào)用json數(shù)據(jù)了，也可以加上一句：console.log(this.fieldParams)在控制臺(tái)打印數(shù)據(jù)
表格代碼：
<el-table :data="fieldParams" border > </el-table>
通過(guò)axios異步加載技術(shù)讀取本地的json文件內(nèi)容，并通過(guò)vue.js處理數(shù)據(jù)在h6頁(yè)面分頁(yè)顯示（這里以3行數(shù)據(jù)分頁(yè)）
[
{"stuId":1,"stuName":"李華","stuSex":"男","stuAge":20},
{"stuId":2,"stuName":"張國(guó)偉","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":"錢(qián)國(guó)強(qiáng)","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}
]<body>
<div id ="app" v-cloak>
<table border="1px" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>序號(hào)</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>
<!-- 用無(wú)序列表做一個(gè)頁(yè)碼導(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><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><script>
//創(chuàng)建Vue實(shí)例,得到 ViewModel
var app = new Vue({
el: '#app',
data: {
list:[],
pageSize:3,//每頁(yè)大小
currentPage:0 //當(dāng)前頁(yè)碼
},/*數(shù)據(jù)*/
mounted(){
//異步加載json數(shù)據(jù)
axios.get('/json/student.json',{}).then(function(response){
app.list=response.data;
});
},/*自動(dòng)加載函數(shù)*/
methods: {
//上一頁(yè)
nextPage: function(){
if (this.currentPage == this.pageNumber - 1) return;
this.currentPage++;
},
//下一頁(yè)
prePage: function(){
if (this.currentPage == 0) return;
this.currentPage--;
},
//頁(yè)碼
thisPage: function(index){
this.currentPage = index;
}
},/*執(zhí)行觸發(fā)函數(shù)*/
computed: {
//分頁(yè)數(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);//取出一頁(yè)數(shù)據(jù)
},
//共有多少頁(yè)
pageNumber: function(){
if(this.list.length<=this.pageSize){
return 1;
}
return Math.ceil(this.list.length / this.pageSize);
}
},/*動(dòng)態(tài)計(jì)算屬性*/
});
</script>
到此，相信大家對(duì)“vue怎么加載本地json數(shù)據(jù)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼