Vue implementa um componente de paginação Vue-Paginaiton
Sinto que usei o Vue há um tempo, que não quero mais operar o DOM diretamente. A experiência de programação ligada a dados é realmente boa. Uma implementação de um componente de paginação.
O CSS aqui não será lançado. Você pode lê-lo e baixá-lo diretamente no Github: Vue-Pagination
Vamos tirar uma foto do exemplo primeiro
Estompo
<div> <ul> <li v-if = "showfirstText"> <a v-on: click = "CUR-"> página anterior </a> </li> <li v-for = "índice em pagenums"> <a v-on: click = "pagechange (index)"> {{index}} </a> </li: <i> v-V -f () " página </a> </li> <li> <a> Total <i> {{all}} </i> </a> </li> </ul> </div>Antes da introdução do JS, a exibição e a análise da página podem ser simplesmente emitidas diretamente. {{index}} é o número da página, que requer alguma renderização dinâmica.
var app = new vue ({el: '#app', dados: {currentPage: 1, totlepage: 28, visiblepage: 10, msg: ''},})Chamar o New Vue ({parâmetro}) é criar um componente básico, atribuí -lo ao variável app.el é a abreviação do elemento, posicionando a posição do modelo.data é os dados. Eu sei o número total de páginas, mas, para exibir o número da página, ele ainda precisa ser calculado; portanto, exibir o número da página é o atributo de cálculo. Então, precisamos usar computação
Computado: {// Atributos computados: retornar à matriz de número da página, a verificação suja será executada automaticamente aqui, sem $ watch (); pagenums: function () {// Limite da página antes e após a inicialização var lowpage = 1; var highPage = this.TotlePage; var pagearr = []; if (this.totlePage> this.VisiblePage) {// Se o número total de páginas exceder o número de páginas visíveis, mais processamento será executado; var subvisiblePage = math.ceil (this.VisiblePage/2); if (this.currentpage> subvisiblePage && this.currentpage <this.totlepage - subvisiblePage +1) {// Processando página normal lotpage lOWPage = this.currentpage - subvisível; HighPage = this.CurrentPage + SubvisiblePage -1; } else if (this.currentPage <= subvisiblePage) {// Processando a página lógica lógica para as poucas páginas anteriores = 1; HighPage = this.VisiblePage; } else {// Processando a página lógica para as últimas páginas = this.totlePage - this.VisiblePage + 1; HighPage = this.TotlePage; }} // Depois de determinar os limites da página superior e inferior, você deve se preparar para pressionar a matriz e ficar enquanto (LowPage <= HighPage) {pagearr.push (LowPage); LowPage ++; } retornar pagearr; }},Ao assistir ao modelo HTML, encontrei a diretiva V-IF. É óbvio que, quando o conteúdo for verdadeiro, ele será produzido e se não for.
Focar em
<li v-for = "índice em pagenums" v-bind: class = "{Active: currentPage == index}"> <a v-on: click = "pagechange (index)"> {{index}} </a> </li>V-For é o atributo de cálculo de saída de renderização do loop pagenums. Cada elemento filho do loop é atribuído ao índice V-Bind: Class para vincular a classe. Ao renderizar à marca de ângulo atual, adicione a classe V-ON: clique para vincular o evento. Passo o índice como parâmetro em e faço um julgamento posteriormente e passo pelo evento por padrão.
Em seguida, adicionamos o campo Métodos à opção Vue
Métodos: {pagechange: function (página) {if (this.currentPage! = Page) {this.currentpage = página; isto. // Comunicação entre componentes pai e filho: ==> Os componentes filhos distribuem os eventos por meio de $ difipatch (), e o componente pai bolhas e ouve os eventos correspondentes através do V-ON: Page-troca; }; }}Interação do componente
O componente terminou de escrever e o problema é que o usuário clica na página para alterar. Como você notifica outros componentes para fazer alterações correspondentes? Você pode inserir uma instrução sob a função em que o canto da página muda. Mas esse método é uma abordagem muito ruim. Disponível
relógio: {currentPage: function (OldValue, newValue) {console.log (argumentos)}}Observe os dados da página de corrente quando mudar, antes e depois dos valores podem ser obtidos. Em seguida, notifique outros componentes.
O código completo pode ser encontrado no Github: Vue-Pagination
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.