vue实现豆瓣电影分页

要实现豆瓣电影的分页，可以使用Vue.js框架的组件化思想，将页面拆分成多个组件，包括电影列表组件、分页组件等。

首先，需要在Vue实例中定义一个电影列表数组，用来存储从豆瓣电影API中获取的电影信息。然后，通过一个分页组件来控制每页显示的电影数量和当前页码。

以下是一个简单的代码示例：

1. 定义电影列表数组和分页参数

data() {
  return {
    movies: [], // 电影列表数组
    pageSize: 10, // 每页显示的电影数量
    currentPage: 1, // 当前页码
    total: 0 // 总电影数量
  };
},

2. 获取电影列表数据

methods: {
  async getMovies() {
    const start = (this.currentPage - 1) * this.pageSize;
    const res = await axios.get(
      `https://api.douban.com/v2/movie/top250?start=${start}&count=${this.pageSize}`
    );
    this.movies = res.data.subjects;
    this.total = res.data.total;
  }
}

3. 创建电影列表组件

<template>
  <div>
    <div v-for="movie in movies" :key="movie.id">
      <h3>{{ movie.title }}</h3>
      <p>{{ movie.rating.average }}</p>
      <img :src="movie.images.medium" alt="">
    </div>
  </div>
</template>

4. 创建分页组件

<template>
  <div>
    <button @click="prevPage">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    pageSize: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit("page-change", this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit("page-change", this.currentPage + 1);
      }
    }
  }
};
</script>

5. 在父组件中使用分页组件和电影列表组件

<template>
  <div>
    <movie-list :movies="movies" />
    <pagination
      :pageSize="pageSize"
      :currentPage="currentPage"
      :total="total"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import MovieList from "./MovieList.vue";
import Pagination from "./Pagination.vue";

export default {
  components: {
    MovieList,
    Pagination
  },
  data() {
    return {
      movies: [],
      pageSize: 10,
      currentPage: 1,
      total: 0
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.getMovies();
    },
    async getMovies() {
      const start = (this.currentPage - 1) * this.pageSize;
      const res = await axios.get(
        `https://api.douban.com/v2/movie/top250?start=${start}&count=${this.pageSize}`
      );
      this.movies = res.data.subjects;
      this.total = res.data.total;
    }
  },
  mounted() {
    this.getMovies();
  }
};
</script>

这样，就可以实现豆瓣电影的分页功能了。注意，上面的代码只是一个简单的示例，实际开发中还需要进行错误处理、样式美化等。