Vue 分页

最新推荐文章于 2025-07-30 11:49:09 发布

转载最新推荐文章于 2025-07-30 11:49:09 发布 · 537 阅读

文章标签：

#Vue #分页

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单分页组件示例。该组件可根据当前页数显示前后页及页码链接，并通过计算属性动态调整显示的页码范围。代码中包括HTML结构、CSS样式和Vue实例配置。

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>