JLNTV_IPD/vue3-h5-quark-template
4
0
Fork 0
mirror of https://github.com/xsf0105/vue3-h5-template.git synced 2025-04-06 04:00:04 +08:00
Code Issues Projects Releases Wiki Activity

debug

Browse Source
This commit is contained in:
徐顺发 2017-04-24 18:53:00 +08:00
parent 995d2e5293
commit a3304c516e
1 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/index.vue
View File

@ -1,11 +1,13 @@
<template>
<div class="container">
<button v-on:click="loadList">click me</button>
<ul>
<li v-for="(item, index) in listArr">
<a :href="item.alt">{{index}} 《{{item.title}}》</a>
</li>
</ul>
<div>
<button v-on:click="loadMore">click me</button>
<div>
<ul>
<li v-for="(item, index) in listArr">
<a href="https://github.com/allan2coder/VUE2-SPA-Tutorial">{{index}} 《{{item.name}}》</a>
</li>
</ul>
</div>
<div class="loading" v-if="loading">
Loading...
</div>
@ -22,47 +24,71 @@
listArr: [],
}
},
created () {
this.loadList();
},
methods: {
loadList: function() {
console.log("初始化加载数据开始...");
var _this = this;
_this.loading = true;
axios.get('https://api.douban.com/v2/movie/top250', {
axios.get('https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery', {
params: {
count: 11
}
})
.then(function (response) {
// console.log(response);
_this.loading = false;
_this.listArr = response.data.subjects;
_this.listArr = response.data.items;
console.log(_this.listArr,"加载完成");
})
.catch(function (error) {
console.log(error);
});
},
loadMore: function(){
console.log("load more")
var _this = this;
_this.loading = true;
axios.get('https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery', {
params: {
}
})
.then(function (response) {
_this.loading = false;
_this.listArr = _this.listArr.concat(response.data.items);
})
}
}
}
</script>
<style>
h1{
font-size: 22px;
margin-bottom: 60px;
font-weight: 400;
}
button{
display: block;
margin: 0 auto;
line-height: 30px;
border: 1px solid #ddd;
color: #41b883;
}
a{
color: blue;
color: #35495e;
font-size: 16px;
}
ul{
margin-bottom: 60px;
}
li{
line-height: 28px;
line-height: 32px;
border-bottom: 1px solid #ddd;
padding: 0 10px;
}
b{
font-size: 12px;
color: #35495e;
}
.loading{
text-align: center;
}
</style>