当前位置：首页 > 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 实现主题的方法使用 CSS 变量动态切换主题定义全局 CSS 变量，通过修改这些变量实现主题切换。在 Vue 的根组件或全局样式中定义变量： :root { --primary-co…

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具，jQuery 以 DOM 操作和事件驱动为核心，而 Vue.js 是数据驱动的现代化框架。如果想用 jQuery 实现类似 Vue 的功能（如…

vue实现单选

实现 Vue 单选功能在 Vue 中实现单选功能可以通过多种方式完成，以下是几种常见的方法：使用 v-model 绑定单选按钮通过 v-model 可以轻松实现单选功能，将单选按钮的值绑定到同…

vue实现treeview

Vue 实现 TreeView 的方法使用递归组件实现 TreeView 递归组件是 Vue 中实现 TreeView 的常见方式。通过组件调用自身，可以轻松处理嵌套的树形结构数据。 <te…

vue实现CRUD

Vue 实现 CRUD 操作 Vue 提供了响应式数据绑定和组件化开发能力，结合后端 API 可以轻松实现 CRUD（增删改查）功能。以下是基于 Vue 3 和 Axios 的完整实现方案。安装依…

vue实现搜索过滤

Vue 实现搜索过滤使用计算属性实现搜索过滤在 Vue 中，计算属性（computed）是实现搜索过滤的常见方法。通过计算属性动态过滤数据，无需修改原始数据。 <template>…

vue实现ul翻页