前端开发者vue移动前端开发实战|vue前端开发招聘|vue前端框架开发文档
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>前端 主流web开发框架有哪些:vue分页</title>
<style>
a {
display: inline-block;
margin: 0 5px;
height: 20px;
color: #666;
background: #eee;
text-decoration: none;
padding: 0 10px;
text-align: center;
line-height: 20px;
background: #ccc
}
a.active {
background: #008B8B;
color: #fff
}
</style>
</head>
<body>
<div id=”app”>
<page-component :pageCount=”page.pageCount” :pagesize=”page.pageSize” :pageIndex=”page.pageIndex” @getdata=’getData’ @get=”getPage”></page-component>
</div>
</body>
<script src=”//cdn.bootcss.com/vue/2.1.10/vue.js”></script>
<script>
Vue.component(‘page-component’, {
props: [‘pagecount’, ‘pageindex’, ‘pagesize’],
data() {
return {
current: this.pageindex,
showItem: this.pagesize,
allPage: this.pagecount
}
},
template: `
<div class=”page”>
<a href=”javascript:” v-show=”current != 1″ @click=”current– && goto(current)”>上一页</a>
<a href=”javascript:” v-for=”index in pages” :class=”{active:(index == current)}” @click=”goto(index)” :key=”index”>{{index}}</a>
<a href=”javascript:” v-show=”current != allPage && allPage!= 0″ @click=”current++ && goto(current)”>下一页</a>
</div>
`,
computed: {
pages: function () {
var pag = [];
if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showItem, this.allPage);
while (i) {
pag.unshift(i–);
}
}
else { //当前页数大于显示页数了
var middle = this.current – Math.floor(this.showItem / 2),//从哪里开始
i = this.showItem;
if (middle > (this.allPage – this.showItem)) {
middle = (this.allPage – this.showItem) + 1
}
while (i–) {
pag.push(middle++);
}
}
return pag
}
},
methods: {
goto: function (index) {
this.current = index;
this.$emit(‘get’, index)
this.$emit(‘getdata’)
}
}
});
new Vue({
el: ‘#app’,
data: {
page: {
pageCount: 10, //总页数
pageIndex: 1, //默认页
pageSize: 5 //每次显示页数
}
},
methods: {
getPage: function (inx) {
this.page.pageIndex = inx;
},
getData: function () {
alert(“这里面写请求第” + this.page.pageIndex + “页数据”);
//这里面执行ajax请求的分页信息
}
}
})
</script>
</html>
前端快速开发框架|vue 前端开发工具|前端开发最新框架vue
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册