自定义一个vue分页

新人上手 请勿喷

直接上代码 HTML

// html
<div class="dibuspage">
				<div class="dibuspage_one">
					<div class="pag_oooos" v-for="index in indexs" @click="btnClick(index)"
						:class="{pag_oooo:cur == index}">{{index}}</div>
					<div v-if="cur != all" class="gg" @click="cur++,pageClick()">下一页</div>
					<div v-if="cur == all" class="gg">下一页</div>
					<div class="gg">第{{cur}}页</div>
					<div class="gg">共{{all}}页</div>
				</div>
			</div>

CSS自己写吧

js代码

//data定义
data() {
			return {
				cur: 1,
				all: 1,
				pageSize: 8,
				centes: []
			}
		},
methods: {
//页码点击事件
			btnClick(data) {
				if (data != this.cur) {
					this.cur = data
				}
				console.log(this.cur, data)
				this.getNews()
			},
	pageClick() {
				this.getNews()
			},
			}
			computed: {
			//分页
			indexs: function() {
				var left = 1;
				var right = this.all;
				var ar = [];
				if (this.all >= 5) {
					if (this.cur > 3 && this.cur < this.all - 2) {
						left = this.cur - 2
						right = this.cur + 2
					} else {
						if (this.cur <= 3) {
							left = 1
							right = 5
						} else {
							right = this.all
							left = this.all - 4
						}
					}
				}
				while (left <= right) {
					ar.push(left)
					left++
				}
				return ar
			}
		}

##新人一枚 请勿喷 有问题指出 谢谢