vue实现影片列表

Vue 实现影片列表

使用 Vue 实现影片列表可以通过多种方式完成，以下是几种常见的方法：

使用 v-for 渲染列表

通过 v-for 指令动态渲染影片列表数据，结合 :key 确保高效更新。

<template>
  <div>
    <h3>影片列表</h3>
    <ul>
      <li v-for="movie in movies" :key="movie.id">
        {{ movie.title }} - {{ movie.year }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [
        { id: 1, title: "影片1", year: 2020 },
        { id: 2, title: "影片2", year: 2021 },
        { id: 3, title: "影片3", year: 2022 }
      ]
    };
  }
};
</script>

使用组件拆分

将影片项封装为独立组件，提高复用性和可维护性。

<template>
  <div>
    <h3>影片列表</h3>
    <MovieItem v-for="movie in movies" :key="movie.id" :movie="movie" />
  </div>
</template>

<script>
import MovieItem from "./MovieItem.vue";

export default {
  components: { MovieItem },
  data() {
    return {
      movies: [
        { id: 1, title: "影片1", year: 2020 },
        { id: 2, title: "影片2", year: 2021 },
        { id: 3, title: "影片3", year: 2022 }
      ]
    };
  }
};
</script>

从 API 获取数据

通过异步请求获取影片列表数据，通常使用 axios 或 fetch。

<template>
  <div>
    <h3>影片列表</h3>
    <ul v-if="movies.length">
      <li v-for="movie in movies" :key="movie.id">
        {{ movie.title }} - {{ movie.year }}
      </li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  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);
    }
  }
};
</script>

添加搜索和筛选功能

通过计算属性实现影片列表的动态筛选。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索影片" />
    <ul>
      <li v-for="movie in filteredMovies" :key="movie.id">
        {{ movie.title }} - {{ movie.year }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: "",
      movies: [
        { id: 1, title: "影片1", year: 2020 },
        { id: 2, title: "影片2", year: 2021 },
        { id: 3, title: "影片3", year: 2022 }
      ]
    };
  },
  computed: {
    filteredMovies() {
      return this.movies.filter(movie =>
        movie.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

使用 Vuex 管理状态

在大型应用中，通过 Vuex 集中管理影片列表数据。

<template>
  <div>
    <h3>影片列表</h3>
    <ul>
      <li v-for="movie in movies" :key="movie.id">
        {{ movie.title }} - {{ movie.year }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["movies"])
  },
  created() {
    this.$store.dispatch("fetchMovies");
  }
};
</script>

以上方法可根据项目需求灵活组合使用。