跳动城乡网在前端开发中，分页功能是常见的需求之一，尤其是在处理大量数据时。使用 Vue.js 实现分页功能不仅高效，还能让界面更加美观和动态化！🚀
首先，我们需要明确分页的基本逻辑：通过 `v-for` 指令将数据按页展示，同时结合按钮或下拉菜单切换页面。例如，在一个商品列表中，每页显示 10 条数据，用户可以通过点击“上一页”、“下一页”或直接选择页码来浏览不同页面。
代码示例可以这样写：
```vue
{{ item.name }}
第{{ currentPage }}页
<script>
export default {
data() {
return {
items: Array.from({ length: 50 }, (_, i) => ({ name: `商品${i + 1}` })),
pageSize: 10,
currentPage: 1,
};
},
computed: {
paginatedData() {
const start = (this.currentPage - 1) this.pageSize;
const end = start + this.pageSize;
return this.items.slice(start, end);
},
},
methods: {
prevPage() {
if (this.currentPage > 1) this.currentPage--;
},
nextPage() {
const totalPages = Math.ceil(this.items.length / this.pageSize);
if (this.currentPage < totalPages) this.currentPage++;
},
},
};
</script>
```
通过这样的方式，我们轻松实现了 Vue 的分页功能，不仅代码简洁，还便于扩展其他交互效果。✨
💡 小提示：记得优化用户体验，比如禁用无效的按钮或添加加载动画哦！⏳
