vue实现影片列表

使用 Vue 实现影片列表

1. 创建 Vue 项目并安装依赖

确保已安装 Vue CLI，通过以下命令创建项目：

vue create movie-list
cd movie-list
npm install axios

2. 准备影片数据

可以在组件中直接定义数据，或通过 API 获取。以下是一个静态数据示例：

data() {
  return {
    movies: [
      { id: 1, title: "The Shawshank Redemption", year: 1994, director: "Frank Darabont" },
      { id: 2, title: "The Godfather", year: 1972, director: "Francis Ford Coppola" },
      { id: 3, title: "Pulp Fiction", year: 1994, director: "Quentin Tarantino" }
    ]
  };
}

3. 创建影片列表组件

在 src/components 下创建 MovieList.vue 文件：

<template>
  <div class="movie-list">
    <h2>影片列表</h2>
    <ul>
      <li v-for="movie in movies" :key="movie.id">
        {{ movie.title }} ({{ movie.year }}) - {{ movie.director }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MovieList",
  props: {
    movies: {
      type: Array,
      required: true
    }
  }
};
</script>

<style scoped>
.movie-list {
  margin: 20px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 10px 0;
  padding: 10px;
  background: #f4f4f4;
}
</style>

4. 在父组件中使用影片列表

在 App.vue 或其他父组件中引入并使用 MovieList：

<template>
  <div id="app">
    <MovieList :movies="movies" />
  </div>
</template>

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

export default {
  name: "App",
  components: {
    MovieList
  },
  data() {
    return {
      movies: [
        { id: 1, title: "The Shawshank Redemption", year: 1994, director: "Frank Darabont" },
        { id: 2, title: "The Godfather", year: 1972, director: "Francis Ford Coppola" },
        { id: 3, title: "Pulp Fiction", year: 1994, director: "Quentin Tarantino" }
      ]
    };
  }
};
</script>

5. 动态获取影片数据

如果需要从 API 获取数据，可以使用 axios：

<script>
import axios from "axios";

export default {
  name: "App",
  components: {
    MovieList
  },
  data() {
    return {
      movies: []
    };
  },
  async created() {
    try {
      const response = await axios.get("https://api.example.com/movies");
      this.movies = response.data;
    } catch (error) {
      console.error("Error fetching movies:", error);
    }
  }
};
</script>

6. 添加搜索和过滤功能

为影片列表添加搜索功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索影片" />
    <MovieList :movies="filteredMovies" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: "",
      movies: [
        { id: 1, title: "The Shawshank Redemption", year: 1994, director: "Frank Darabont" },
        { id: 2, title: "The Godfather", year: 1972, director: "Francis Ford Coppola" },
        { id: 3, title: "Pulp Fiction", year: 1994, director: "Quentin Tarantino" }
      ]
    };
  },
  computed: {
    filteredMovies() {
      return this.movies.filter(movie =>
        movie.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

7. 添加分页功能

对于大量影片数据，可以添加分页：

<template>
  <div>
    <MovieList :movies="paginatedMovies" />
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 5,
      movies: [
        // 影片数据
      ]
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.movies.length / this.itemsPerPage);
    },
    paginatedMovies() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.movies.slice(start, end);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

通过以上步骤，可以快速实现一个功能完整的 Vue 影片列表应用。