Vue реализует компонент страниц Vue-Paginaiton
Я чувствую, что некоторое время использовал Vue, что я больше не хочу управлять DOM напрямую. Опыт программирования, связанный с данными, действительно хорош. Реализация компонента пейджинга.
CSS здесь не будет выпущен. Вы можете прочитать его и загрузить прямо на GitHub: Vue-Pagination
Давайте сначала сфотографируем пример
трафарет
<div> <ul> <li v-if = "showfirsttext"> <a v-on: click = "cur-"> предыдущая страница </a> </li> <li v-for = "Индекс в pagenums"> <a v-on: clic v-on: click = "cur ++"> следующая страница </a> </li> <li> <a> total <i> {{all}} </i> </a> </li> </ul> </div>Прежде чем введен JS, отображение и анализ страницы может быть просто выводится напрямую. {{index}} - номер страницы, который требует некоторого динамического рендеринга.
var app = new Vue ({el: '#App', data: {currentPage: 1, totlePage: 28, visiblePage: 10, msg: ''},})Вызов New Vue ({parameter}) предназначен для создания основного компонента, присваивайте его переменной app.el - это аббревиатура элемента, позиционирующая позицию шаблона. Дата - это данные. Я знаю общее количество страниц, но для отображения номера страницы его все еще нужно рассчитать, поэтому отображение номера страницы является атрибутом расчета. Поэтому нам нужно использовать вычислитель
Вычисляется: {// Вычисленные атрибуты: вернуть массив номеров страницы, грязная проверка будет автоматически выполнена здесь без $ watch (); pagenums: function () {// граница страницы до и после инициализации var lowpage = 1; var HighPage = this.TotlePage; var pagearr = []; if (this.totlepage> this.visiblepage) {// Если общее количество страниц превышает количество видимых страниц, будет выполнена дальнейшая обработка; var subvisiblepage = math.ceil (this.visiblepage/2); if (this.currentPage> subvisiblePage && this.currentPage <this.TotlePage - subvisiblePage +1) {// Обработка нормальной страницы Lowpage = this.currentPage - subvisiblePage; HighPage = this.currentPage + subvisiblePage -1; } else if (this.currentPage <= subvisiblePage) {// Обработка логической низкой страницы для предыдущих нескольких страниц = 1; HighPage = this.visiblePage; } else {// Обработка логической низкой страницы для последних нескольких страниц = this.TotlePage - this.visiblePage + 1; HighPage = this.TotlePage; }} // После определения границ верхней и нижней страницы необходимо подготовиться к нажатию в массив и быть в то время как (Lowpage <= HighPage) {pagearr.push (lowpage); низкая страница ++; } вернуть Pagearr; }},При просмотре шаблона HTML я нашел директиву V-IF. Очевидно, что когда контент правда, оно будет выводится, а если это не так.
Сосредоточиться на
<li v-for = "index in pagenums" v-bind: class = "{active: currentpage == index}"> <a v-on: click = "pagechange (index)"> {{index}} </a> </li>V-FOR-это атрибут вычисления выхода из петли PAGENUM. Каждый детский элемент цикла присваивается индексу V-Bind: класс для привязки класса. При рендеринге в текущую марку угла добавьте класс V-on: нажмите, чтобы связать событие. Я передаю индекс в качестве параметра, а позже высказываю событие и прохожу событие по умолчанию.
Затем мы добавляем поле методов в опцию Vue
Методы: {pageChange: function (page) {if (this.currentpage! = page) {this.currentpage = page; это. $ dispatch ('change', page); // Связь между родительскими и дочерними компонентами: ==> Дочерние компоненты распределяют события через $ dipatch (), а пузырьки родительских компонентов и слушают соответствующие события через V-on: page-change; }; }}Компонентное взаимодействие
Компонент закончен написание, и проблема в том, что пользователь нажимает на страницу, чтобы измениться. Как вы уведомляете другие компоненты о внесении соответствующих изменений? Вы можете вставить оператор в соответствии с функцией, где изменяется угол страницы. Но этот метод очень плохой подход. Доступный
СМОТРЕТЬ: {CurrentPage: Function (OldValue, NewValue) {console.log (аргументы)}}Соблюдайте данные текущей страницы при изменении, до и после, как можно получить значения. Затем уведомить другие компоненты.
Полный код можно найти в GitHub: Vue-Pagination
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.