当前位置：首页 > VUE

vue实现影片列表

2026-01-16 06:51:36VUE

Vue 实现影片列表

使用 Vue CLI 创建项目

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

vue create movie-list
cd movie-list

安装依赖

根据需要安装 axios 用于数据请求：

npm install axios

创建影片列表组件

在 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 }}
      </li>
    </ul>
  </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>

<style scoped>
.movie-list {
  max-width: 600px;
  margin: 0 auto;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>

在主组件中引入

修改 src/App.vue 文件以使用 MovieList 组件：

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

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

export default {
  components: {
    MovieList
  }
};
</script>

运行项目

启动开发服务器：

npm run serve

可选优化

分页加载：通过 API 分页参数实现懒加载。
搜索功能：添加输入框绑定搜索事件过滤列表。
状态管理：对于复杂场景，可使用 Vuex 管理影片数据。

示例 API 数据格式

假设后端返回的影片数据格式如下：

[
  { "id": 1, "title": "影片A", "year": 2020 },
  { "id": 2, "title": "影片B", "year": 2021 }
]

vue实现影片列表

标签: 影片列表

分享给朋友：

vue实现列表

Vue 实现列表的方法在 Vue 中实现列表渲染通常使用 v-for 指令，可以动态生成多个元素。以下是几种常见的实现方式：基础列表渲染使用 v-for 遍历数组，生成列表项。v-for 需要…

vue实现WiFi列表

获取WiFi列表的Vue实现使用Vue获取WiFi列表需要结合浏览器API或后端服务，因为浏览器出于安全限制无法直接访问系统WiFi信息。以下是两种常见实现方式：方法一：通过Web API获取…

vue实现无线滚动列表

无限滚动列表的实现方法无限滚动列表通常用于展示大量数据，通过动态加载数据减少初始渲染压力。以下是基于Vue的实现方法：使用Intersection Observer API监听滚动 Inters…

vue实现列表显示

使用 Vue 实现列表显示基础列表渲染在 Vue 中，可以通过 v-for 指令实现列表渲染。以下是一个简单的示例： <template> <ul> <…

h5实现展开列表

使用HTML5和CSS实现展开列表在HTML5中，可以通过结合CSS和JavaScript实现展开列表效果。以下是几种常见的方法：方法1：使用details和summary标签 HTML5提供…

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能，包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法：使用数组存储列表数据数组是 JavaS…

vue实现影片列表