当前位置：首页 > VUE

vue实现ul翻页

2026-01-19 22:14:53VUE

Vue 实现 ul 翻页

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

数据准备与分页逻辑

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

vue实现ul翻页

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>

样式优化

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

vue实现ul翻页

.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">

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

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 弹幕不重叠的方法 CSS 定位与动画控制通过绝对定位和动态计算弹幕轨道高度，确保弹幕在不同轨道上运行。每条弹幕占据固定高度的轨道，避免重叠。 // 弹幕轨道高度计算 const t…

vue的艾特功能实现

Vue 的 @ 功能实现在 Vue 中实现类似社交平台的 @ 功能，通常涉及输入框的监听、用户匹配和选择插入。以下是具体实现方法：监听输入框内容使用 v-model 绑定输入框内容，并通过…

vue中实现显示和隐藏

控制显示与隐藏的方法在Vue中实现元素的显示和隐藏可以通过多种方式完成，以下是常见的几种方法： 1. 使用v-if指令v-if根据条件动态添加或移除DOM元素，适合需要频繁切换的场景。当条件为fa…

vue实现下拉框删除

Vue 实现下拉框删除功能在Vue中实现下拉框的删除功能通常涉及以下步骤：数据绑定与渲染在Vue组件中定义数据数组用于存储下拉框选项： data() { return {…

vue实现store

Vue 实现 Store 在 Vue 中，可以通过 Vuex 或 Pinia 实现全局状态管理（Store）。以下是两种主流方案的实现方法。使用 Vuex 实现 Store Vuex 是 Vue…

vue实现ul翻页