Как реализовать нумерацию страниц для приложения в Vue

Пагинация помогает пользователям удобно перемещаться по большим наборам данных и находить нужную информацию.

Вот как реализовать нумерацию страниц в приложении, созданном с помощью Vue.

Начните работу с Vue-Awesome-Paginate

Vue-awesome-paginate — мощная и легкая библиотека нумерации страниц от Vue. Он упрощает процесс создания отображений данных с разбивкой на страницы, предоставляет комплексные функции, простой в использовании API и поддерживает различные сценарии разбивки на страницы.

Чтобы начать использовать vue-awesome-paginate, установите пакет, выполнив следующую команду терминала в каталоге вашего проекта:

npm установить vue-awesome-paginate

Затем настройте пакет для работы в вашем приложении Vue, скопировав приведенный ниже код в файл src/main.js:

импортировать { createApp } из “vue”; импортировать приложение из «./App.vue»; импортировать VueAwesomePaginate из «vue-awesome-paginate»; импортировать «vue-awesome-paginate/dist/style.css»; createApp(App).use(VueAwesomePaginate).mount(“#app”);

Этот код импортирует и регистрирует пакет с помощью метода .use(), поэтому вы можете использовать его в любом месте приложения. В пакет нумерации страниц входит файл CSS, который также импортирует этот блок кода.

Создайте тестовое приложение с помощью Vue.

Чтобы продемонстрировать, как работает пакет vue-awesome-paginate, вы создадите приложение Vue, отображающее образец набора данных. Вы будете получать данные из API с помощью Axios для этого приложения.

Скопируйте приведенный ниже блок кода в файл App.vue:

Загрузка комментариев.

Этот блок кода использует API композиции Vue для создания компонента. Этот компонент использует Axios для получения комментариев из API JSONPlaceholder до того, как Vue смонтирует его (хук onBeforeMount). Затем он сохраняет комментарии в массиве комментариев, используя шаблон для их отображения или сообщение о загрузке, пока комментарии не станут доступны.

Интегрируйте Vue-Awesome-Paginate в свое приложение Vue.

Теперь у вас есть простое приложение Vue, которое извлекает данные из API. Вы можете отредактировать его, чтобы интегрировать пакет vue-awesome-paginate. Вы будете использовать эту функцию нумерации страниц, чтобы разделить комментарии на разные страницы.

Замените раздел сценария файла App.vue следующим кодом:

Приведенный выше блок кода добавляет две другие ссылки на реакцию: perPage и currentPage. Эти ссылки содержат количество элементов, отображаемых на каждой странице, и соответствующий номер текущей страницы.

Этот код также создает вычисляемую ссылку с именем displayComments. Он вычисляет область комментария на основе значений currentPage и perPage. Он возвращает часть массива комментариев в этом диапазоне, который группирует комментарии на разных страницах.

Теперь замените шаблонную часть файла App.vue следующим кодом:

Загрузка комментариев.

Атрибут v-for отображает в шаблоне список, указывающий на массив displayComments. В этом примере добавляется компонент vue-awesome-paginate, которому приведенный выше код передает свойства.

После стилизации приложения у вас появится страница, которая выглядит следующим образом:

Нажимая на каждую пронумерованную кнопку, вы увидите разные группы комментариев.

Теперь у вас есть очень простое приложение Vue, которое показывает, как эффективно разбивать данные на страницы. Вы также можете использовать бесконечную прокрутку для обработки длинных наборов данных в вашем приложении. Прежде чем выбирать нумерацию страниц и бесконечную прокрутку, обязательно учтите потребности своего приложения. У них есть свои плюсы и минусы.

В приведенной выше статье вы познакомились с «Как реализовать нумерацию страниц для приложения в Vue». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!