vue 一次请求全部数据分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 500px;
background: skyblue;
margin: 0 auto;
}
span{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(item,index) in list" :key="index">
<p><span>{{index}}</span>{{item.body}}</p>
</li>
</ul>
<!-- <button type="button" @click="moreShow">加载更多</button> -->
<div class="">
<button type="button" v-if="moreShowBoolen" @click="moreShow">点击加载更多</button>
<div v-else>
已无更多
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
list: [],
allList:[],
moreShowBoolen: false,
nowPage: 1
},
methods: {
async init() {
var res = await axios.get('http://jsonplaceholder.typicode.com/posts');
this.allList=res.data;//保存请求的所有数据
if (res.data.length <= 20) {
this.list = res.data
this.moreShowBoolen = false
} else {
this.list = res.data.slice(0, 20)
this.moreShowBoolen = true
}
console.log(this.list)
console.log(this.allList)
},
async moreShow() {
// var res = await axios.get('http://jsonplaceholder.typicode.com/posts');
var res = this.allList
this.list = this.list.concat(res.slice(this.nowPage * 20, (this.nowPage + 1) * 20))
this.nowPage++
if (res.length >= this.nowPage * 20) {
this.moreShowBoolen = true
} else {
this.moreShowBoolen = false
}
}
},
created() {
this.init()
},
mounted() {
},
})
</script>
</html>
不记得参照了哪篇文章了…
2009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
