vue简单小项目

<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>