專案開發中,經常會遇到分頁功能,也會經常涉及元件化開發和元件復用,下列用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 ...