HTML代码

<--div id="app">
	<--li v-for="(item,i) in userList">
		<--div v-text="userList[i]"></div>
	<--/li>
<--div class="page">
	<--el-pagination
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="currentPage"
		:page-size="pagesize"
		:pager-count.sync="pageCount"       
		layout="prev, pager, next, jumper"
		:total="total">   
	<--/el-pagination>
</div>
</div>

JavaScript代码

new Vue({
el: ‘#app’,
data () {
return {
currentPage:1, //初始页
pagesize:10, // 每页的数据
userList: [],
pageCount:4,
total:0,
userList2: []
}
},
created() {
$.ajax({
url:“url地址/1”,//后边的1是页数/默认获取第一页
type: ‘get’,
dataType: ‘json’,
success: (res)=>{
//console.log(“文档:”,res)
this.userList = res.data
this.total = res.total
//console.log(“this.userList:”,this.userList)

	          	},
	          	error: function(){
	          	}
	       	})
		},
		methods: {
				// 初始页currentPage、初始每页数据数pagesize和数据data
				handleSizeChange: function (size) {
								this.pagesize = size;
								//console.log(this.pagesize)  //每页下拉显示数据
				},
				handleCurrentChange: function(currentPage){
								this.currentPage = currentPage;
								console.log(this.currentPage)  //点击第几页
								$.ajax({
									url:"url" + currentPage,//加传过来的页数获取数据
									type: 'get',
									dataType: 'json',
									success: (res)=>{
										this.userList = res.data
										//console.log("this.userList:",this.userList)
									},
									error: function(){
									}
							})
				}
		}
	})