vue.js实现分页的简单代码_vue分页 js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41843228/article/details/89422644

这篇博客适合初学者，介绍了如何结合Vue.js和Bootstrap实现数据表格的分页功能。通过点击分页按钮，可以动态切换显示的数据集。文章提供了一步步的代码示例，包括展示数据、设置每页显示数量以及计算总页数的代码块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码仅供参考
适合初学vue.js和bootstrap参考

功能介绍：将一个集合里面的元素用表格形式陈列出来.实现点击分页按钮实现数据的变换
如线图：在这里插入图片描述

分页：
代码块：

<ul  class="pagination pull-right">
		<template v-for="(page, index) in allpages">
        <li  v-if="page == 1" v-bind:class="nowpage == index+1? 'disabled': ''"  v-on:click=" nowpage == index+1 ? '':setDown()"><a href="javascript:" >上一页</a></li>
        <li  v-on:click="fn(index+1)" v-bind:class="nowpage == index+1? 'active' : ''"><a  href="javascript:" >{{page}}</a></li>
        <li  v-if="page == allpages"   v-bind:class="nowpage == index+1? 'disabled': ''" v-on:click=" nowpage == index+1 ? '':setUp()"><a href="javascript:">下一页</a></li>
        </template>
	</ul>

1.展示数据的代码块：

<tr v-for="(me , index) in people0" v-if=" ((nowpage-1)*nowshow+1 <= index ) && (index < nowpage*nowshow+1)">
			<td >{{me.name}}</td>
			<td >{{me.age}}</td>
			<td >{{me.school}}</td>
			<td >{{me.remarks}}</td>
		</tr>

2.每页显示数据的多少的代码块：

	<tr v-for="(me , index) in people0" v-if=" ((nowpage-1)*nowshow+1 <= index ) && (index < nowpage*nowshow+1)">

和

nowpage:1,
allpages:0,
nowshow:2,

3.计算总页数代码块：vm.allpages = Math.ceil(vm.people0.length / vm.nowshow);

详细代码代码参考：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">  
	<meta name="viewport" content="width=device-width, initial-scale=1.0">  
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<title>ex3_01</title>
</head>
<body>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<div class="container">	
	<div id="app">
	<legend>用户管理</legend> 
	<table class="table  table-striped"> 
	
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>毕业学校</th>
			<th>备注</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(me , index) in people0" v-if=" ((nowpage-1)*nowshow+1 <= index ) && (index < nowpage*nowshow+1)">
			<td >{{me.name}}</td>
			<td >{{me.age}}</td>
			<td >{{me.school}}</td>
			<td >{{me.remarks}}</td>
		</tr>
	</tbody>
	</table>

	<ul  class="pagination pull-right">
		<template v-for="(page, index) in allpages">
        <li  v-if="page == 1" v-bind:class="nowpage == index+1? 'disabled': ''"  v-on:click=" nowpage == index+1 ? '':setDown()"><a href="javascript:" >上一页</a></li>
        
        <li  v-on:click="fn(index+1)" v-bind:class="nowpage == index+1? 'active' : ''"><a  href="javascript:" >{{page}}</a></li>	
        	 
        <li  v-if="page == allpages"   v-bind:class="nowpage == index+1? 'disabled': ''" v-on:click=" nowpage == index+1 ? '':setUp()"><a href="javascript:">下一页</a></li>
        </template>
	</ul>
	
</div>
	<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data: {
			nowpage:1,
			allpages:0,
			nowshow:2,

			people0:
				[{
					name:'',
					age:'',
					school:'',
					remarks:''
				},
				{
					name:'张三',
					age:'18',
					school:'复兴小学',
					remarks:''
				},
				{
					name:'张四',
					age:'17',
					school:'朝阳小学',
					remarks:'优秀学生'
				},
				{
					name:'张5',
					age:'18',
					school:'兴光小学',
					remarks:'三好学生'
				},
				{
					name:'张6',
					age:'17',
					school:'朝阳小学',
					remarks:'优秀学生'
				},
				{
					name:'张7',
					age:'18',
					school:'',
					remarks:'三好学生'
				},
				{
					name:'张8',
					age:'18',
					school:'复兴小学',
					remarks:'三好学生'
				},
				{
					name:'张9',
					age:'18',
					school:'',
					remarks:'三好学生'
				}],	

		},
		methods:{
			setUp: function(){
				this.nowpage++;
				
			},
			setDown: function(){
				this.nowpage--;
				
			},
			
			fn: function(index){
				this.nowpage = index;
				
			},		
		}
		
 });
	vm.allpages = Math.ceil(vm.people0.length / vm.nowshow);
</script>
</div>
</body>
</html>