分頁元件 vue

2021-08-03 20:05:56 字數 720 閱讀 6177

專案開發中,經常會遇到分頁功能,也會經常涉及元件化開發和元件復用,下列用vue對分頁元件進行了簡單封裝,具體**如下:

源**:

}(2)pagination.vue**片段:

} (3)pagination.css**片段:

ul, li 

.page-bar

.page-button-disabled

.page-bar li

.page-bar li:first-child > a

.page-bar a

.page-bar a:hover

.page-bar .active a

.page-bar i

(4)main.js**片段:

import vue from 'vue'

new vue()

(5)效果圖:

Vue封裝分頁元件

使用vue做雙向繫結的時候,可能經常會用到分頁功能 接下來我們來封裝乙個分頁元件 先定義樣式檔案 pagination.css ul,li page bar page button disabled page bar li page bar li first child a page bar a p...

vue分頁元件實現

子元件中 page bar pageul sendmessage reduce class page a li for index in indexs key index class btnclick index a li page click sendmessage add a li page 共...

vue 實現分頁元件

類似於element分頁 縮減版 廢話不多說,直接上 元件vue var pagination 條 div button class first click first v bind disabled a button button class prev click prev disabled b ...