vue.js 简单分页案例(1)
这是一个翻页的简单实例,把案例在本地运行一下,然后去理解每行的意思
样式
ul,li{ margin: 0px; padding: 0px;}li{ list-style: none}.page-bar li:first-child>a { margin-left: 0px}.page-bar a{ border: 1px solid # ddd; text-decoration: none; position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: # 337ab7; cursor: pointer}.page-bar a:hover{ background-color: # eee;}.page-bar .active a{ color: # fff; cursor: default; background-color: # 337ab7; border-color: # 337ab7;}.page-bar i{ font-style:normal; color: # d44950; margin: 0px 4px; font-size: 12px;}
html代码
上一页 {{ index }}下一页1. 共{{all}}页
javascrit代码
var pageBar = new Vue({el: '.page-bar',data: { all: 20, //总页数 cur: 1,//当前页码 }, methods: { btnClick: function(data){//页码点击事件 if(data != this.cur){ this.cur = data } } }, computed: { showLast: function(){ console.log(1); if(this.cur == this.all){ return false } return true }, showFirst: function(){ console.log(2); if(this.cur == 1){ return false } return true }, indexs: function(){ var left = 1 var right = this.all var ar = [] if(this.all>= 11){ if(this.cur > 5 && this.cur < this.all-4){//大于6并且小于16 left = this.cur - 5 right = this.cur + 4 }else{ if(this.cur<=5){ left = 1 right = 10 }else{ right = this.all left = this.all -9 } } } while (left <= right){ ar.push(left) left ++ } return ar } },});
关键字:JavaScript, left, #page-bar# return
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!