vue 分页
预览图：
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 分页- 菜鸟教程(runoob.com)</title>
<style>
ul,li {margin:0;padding:0;list-style: none;display: inline-block;user-select: none;}
li{font-size: 15px; color: #1890ff;}
a{display: block;padding: 10px 15px; cursor:pointer;border: 1px solid #1890ff;margin:0 0 0px -1px;}
li.active a{background:#1890ff;color:#fff;}
a:hover {background:#e8e8e8;color:#333;}
a.disable-btn {cursor: not-allowed;}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-if="cur == 1"><a class="disable-btn">上一页</a></li>
<li v-if="cur > 1" @click="cur--"><a>上一页</a></li>
<li v-for="item in indexs" :key="item" @click="btnClick(item)" :class="{'active': cur == item}"><a>{{item}}</a></li>
<li v-if="cur != all" @click="cur++"><a>下一页</a></li>
<li v-if="cur == all"><a class="disable-btn">下一页</a></li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
all: 10,
cur: 1
},
methods: {
btnClick(item) {
if(item != this.cur) {
this.cur = item;
}
}
},
computed: {
indexs() {
let left = 1;
let right = this.all;
let arr = [];
if(this.all >= 7) {
if(this.cur > 4 && this.cur < this.all - 3) {
left = this.cur - 3;
right = this.cur + 3;
} else if(this.cur <= 4){
left = 1;
right = 7;
} else {
left = this.all - 6;
right = this.all;
}
}
while (left <= right) {
arr.push(left);
left++;
}
return arr;
}
}
})
</script>
</body>
</html>
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
