分页器
<template>
<div>
<pagination :cur="cur" :limit="limit" :total="total" :continueNum="continueNum" @changePage="changePage"/>
</div>
</template>
<script>
import pagination from "@/components/pagination";
export default {
name: "detail",
components: {
pagination
},
data() {
return {
cur: 1,
limit: 5,
total: null,
continueNum: 3,
}
},
methods: {
changePage(page) {
this.cur = page
this.getPageData()
},
}
}
</script>
<style scoped>
.detail-container{
background-image: url("/bg1.webp");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.detail-container::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
pointer-events: none;
}
.info-container::after{
content: "";
display: block;
clear: both;
}
</style>
<template>
<div class="w-auto h-16 mx-auto space-x-5">
<button class="inline-block w-20 h-12 text-center rounded-2xl bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer" :disabled="cur === 1" @click="changeCurPage(cur - 1)">上一页</button>
<button class="inline-block w-12 h-12 text-center rounded-full bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer" v-if="startAndEnd.start > 1 " :class="{active: cur === 1}" @click="changeCurPage(1)">1</button>
<button class="inline-block w-12 h-12 text-center rounded-full bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer" v-if="startAndEnd.start > 2 ">...</button>
<button
class="inline-block w-12 h-12 text-center rounded-full bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer"
v-for="(page, index) in startAndEnd.end"
:key="index"
v-if="page >= startAndEnd.start"
@click="changeCurPage(page)"
>
{{ page }}
</button>
<button class="inline-block w-12 h-12 text-center rounded-full bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer" v-if="startAndEnd.end < totalPage - 1">...</button>
<button class="inline-block w-12 h-12 text-center rounded-full bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer" v-if="startAndEnd.end < totalPage" :class="{active: cur === totalPage}" @click="changeCurPage(totalPage)">{{ totalPage }}</button>
<button class="inline-block w-20 h-12 text-center rounded-2xl bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer" :disabled="cur === totalPage" @click="changeCurPage(cur + 1)">下一页</button>
<button class="inline-block w-20 h-12 text-center rounded-2xl bg-indigo-300 bg-opacity-80 leading-10 cursor-pointer"> 共{{ total }}条 </button>
</div>
</template>
<script>
export default {
name: "pagination",
props: ['total', 'cur', 'limit', 'continueNum'],
computed: {
totalPage() {
// 向上取整
return Math.ceil(this.total / this.limit)
},
startAndEnd() {
const {cur, totalPage, continueNum} = this
let start = 0, end = 0
if (continueNum > totalPage) {
start = 1
end = totalPage
} else {
start = cur - continueNum/2
end = cur + continueNum/2
if (start < 1) {
start = 1
end = continueNum
} else if (end > totalPage) {
end = totalPage
start = end - continueNum + 1
}
}
return {start, end}
}
},
methods: {
changeCurPage(page) {
this.$emit('changePage', page)
}
}
}
</script>
效果如下
如果将v-if换成v-show
这效果有点不堪入目了
- 实现本质方法区别
v-show本质就是标签display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
- 编译的条件
v-show都会编译,初始值为false,只是将display设为none,但它也编译了
v-if初始值为false,就不会编译了
性能
- 性能
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。但是v-if更加灵活
Q.E.D.