手写vue分页组件

最新推荐文章于 2024-09-13 11:29:21 发布

gswwxyhk

最新推荐文章于 2024-09-13 11:29:21 发布

阅读量254

点赞数

分类专栏： VUE相关文章标签： vue

本文链接：https://blog.csdn.net/gswwxyhk/article/details/110262303

版权

本文详细介绍了如何从零开始手写一个Vue分页组件，涵盖了组件的设计思路、实现步骤以及关键代码解析，旨在帮助开发者提升Vue组件化开发能力。

摘要由CSDN通过智能技术生成

记录

<template>
  <div class="page">
    <nav aria-label="Page navigation" style="text-align:center;">
        <ul class="pagination">
            <li @click="prePage" :class="pageNo<=1?'disabled':''">
                <a aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li :class="pageNo===index?'active':''" v-for="(index,i) in pages" :key="i" @click="curPage(index)">
                <a>{
  {index}}</a>
            </li>
            <li  :class="pageNo<=pageTotal?'':'disabled'" @click="nextPage">
                <a aria-label="N