#安装
npm install axios --save
<template>
<div>
<div>
第 <input type="text" v-model="page.currentPage" style="width:30px" @change="changePage"/> 页/{{page.pagesNum}}页,每页{{page.pageSize}}条,总共{{page.total}}条数据
</div>
<div>
<button @click="upPage()">上一页</button>
<button @click="downPage()">下一页</button>
</div>
<ul>
<li v-for="(item,index) in dataList" :key="index">
{{item.id}} ==> {{item.description}} ==>> {{item.title}}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
dataList: [],
page: {
currentPage: 1,
pageSize: 5,
total: 0,
pagesNum: 0 // 当前总页数
}
}
},
mounted () {
this.getData(this.page.currentPage, this.page.pageSize)
},
methods: {
changePage () {
this.getData(this.page.currentPage, this.page.pageSize)
},
upPage () {
if (this.page.currentPage === 1) {
this.getData(1, this.page.pageSize)
} else {
this.page.currentPage--
this.getData(this.page.currentPage, this.page.pageSize)
}
},
downPage () {
if (this.page.currentPage === this.page.pagesNum) {
this.getData(this.page.pagesNum, this.page.pageSize)
} else {
this.page.currentPage++
this.getData(this.page.currentPage, this.page.pageSize)
}
},
getData (currentPage, pageSize) {
const url = '/zkc/api/foodListPage/' + currentPage + '/' + pageSize
console.log(url)
axios.get(url).then(res => {
this.dataList = res.data.data.records
this.page.total = res.data.data.total
this.page.pagesNum = res.data.data.pages
})
}
}
}
</script>
<style scoped>
img{
width: 150px;
height: 200px;
}
</style>
App.vue中注册使用
<template>
<div id="app">
<testurl/>
</div>
</template>
<script>
// ES6导出规范
import testurl from './components/Testurl'
// ES6导出模式
export default {
data () {
return {
dataList: ['111', '2222', '333']
}
},
// 局部注册
components: {
testurl
}
}
</script>
<style>
.kerwinactive{
background: red;
}
#routerId{
height: 500px;
border: 10px solid;
}
</style>