当前位置：首页 > VUE

vue实现ul翻页

2026-01-19 22:14:53VUE

Vue 实现 ul 翻页

在 Vue 中实现 ul 列表的翻页功能，可以通过计算属性分割数据并结合分页控件完成。以下是具体实现方式：

数据准备与分页逻辑

假设有一个数组 listData 包含所有列表项数据，通过计算属性 paginatedData 返回当前页的数据：

data() {
  return {
    listData: [...], // 你的原始数据数组
    currentPage: 1,
    itemsPerPage: 10 // 每页显示数量
  };
},
computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    return this.listData.slice(start, end);
  },
  totalPages() {
    return Math.ceil(this.listData.length / this.itemsPerPage);
  }
}

模板渲染

在模板中使用 v-for 渲染分页后的数据，并添加分页导航控件：

<ul>
  <li v-for="(item, index) in paginatedData" :key="index">
    {{ item.text }} <!-- 根据实际数据结构调整 -->
  </li>
</ul>

<div class="pagination">
  <button 
    @click="currentPage--" 
    :disabled="currentPage === 1">
    上一页
  </button>
  <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
  <button 
    @click="currentPage++" 
    :disabled="currentPage >= totalPages">
    下一页
  </button>
</div>

样式优化

为分页控件添加基础样式：

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

高级功能扩展

动态页码跳转
添加输入框实现页码跳转：

<input 
  type="number" 
  v-model.number="jumpPage" 
  min="1" 
  :max="totalPages"
  @keyup.enter="currentPage = jumpPage">

页面尺寸切换
增加下拉菜单调整每页显示数量：

vue实现ul翻页

data() {
  return {
    pageSizeOptions: [5, 10, 20]
  };
}

<select v-model="itemsPerPage">
  <option v-for="size in pageSizeOptions" :value="size">{{ size }}条/页</option>
</select>

注意事项

如果数据是异步加载的，需在数据获取完成后重置 currentPage 为 1。
对于大数据量，考虑使用虚拟滚动（如 vue-virtual-scroller）优化性能。

标签: 翻页 vue

分享给朋友：

vue前端实现搜索

实现搜索功能的基本方法在Vue中实现搜索功能通常涉及以下几个关键步骤，结合数据绑定、计算属性和方法调用来动态过滤和显示结果。数据绑定与输入处理使用v-model双向绑定搜索输入框的值，监听用户…

vue实现安全免登录

Vue 实现安全免登录的方案免登录功能通常通过持久化认证状态（如 Token）实现，但需兼顾安全性。以下是基于 Vue 的常见实现方案：基于 Token 的免登录登录成功后存储 Token…

vue公共列表的实现

实现 Vue 公共列表组件公共列表组件通常用于展示重复结构的数据，例如商品列表、用户列表等。以下是一个典型的实现方式：基础实现创建可复用的列表组件 List.vue： <templat…

vue实现curd

Vue实现CRUD操作初始化Vue项目使用Vue CLI创建新项目，安装必要依赖如axios用于HTTP请求 vue create crud-demo cd crud-demo npm inst…

vue filter 实现

在 Vue.js 中，过滤器（Filter）是一种用于文本格式化的功能，可以在模板中直接使用。以下是实现过滤器的详细方法：全局过滤器注册通过 Vue.filter 方法注册全局过滤器，可在所有组…

vue最佳实现

Vue 最佳实践组件设计组件应遵循单一职责原则，每个组件只负责一个功能模块。命名采用 PascalCase（如 UserProfile.vue），模板中使用 kebab-case（如 <us…

vue实现ul翻页