JLNTV_IPD/vue3-h5-template
4
0
Fork 0
mirror of https://github.com/xxxsf/vue3-h5-template.git synced 2025-04-27 21:26:37 +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> <template>
<div class="container"> <div>
<button v-on:click="loadList">click me</button> <button v-on:click="loadMore">click me</button>
<ul> <div>
<li v-for="(item, index) in listArr"> <ul>
<a :href="item.alt">{{index}} 《{{item.title}}》</a> <li v-for="(item, index) in listArr">
</li> <a href="https://github.com/allan2coder/VUE2-SPA-Tutorial">{{index}} 《{{item.name}}》</a>
</ul> </li>
</ul>
</div>
<div class="loading" v-if="loading"> <div class="loading" v-if="loading">
Loading... Loading...
</div> </div>
@ -22,47 +24,71 @@
listArr: [], listArr: [],
} }
}, },
created () {
this.loadList();
},
methods: { methods: {
loadList: function() { loadList: function() {
console.log("初始化加载数据开始..."); console.log("初始化加载数据开始...");
var _this = this; var _this = this;
_this.loading = true; _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: { params: {
count: 11
} }
}) })
.then(function (response) { .then(function (response) {
// console.log(response);
_this.loading = false; _this.loading = false;
_this.listArr = response.data.subjects; _this.listArr = response.data.items;
console.log(_this.listArr,"加载完成");
}) })
.catch(function (error) { .catch(function (error) {
console.log(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> </script>
<style> <style>
h1{
font-size: 22px;
margin-bottom: 60px;
font-weight: 400;
}
button{ button{
display: block; display: block;
margin: 0 auto; margin: 0 auto;
line-height: 30px; line-height: 30px;
border: 1px solid #ddd;
color: #41b883;
} }
a{ a{
color: blue; color: #35495e;
font-size: 16px;
} }
ul{ ul{
margin-bottom: 60px; margin-bottom: 60px;
} }
li{ 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> </style>