1.效果
其他操作请看基于vue和ajax的分页
https://blog.csdn.net/g_optimistic/article/details/89105120
2.代码
{% verbatim myblock %}
<div id="bindData">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
<th>专业</th>
<th>管理</th>
</tr>
</thead>
<tbody>
<tr v-for="s in page_data">
<td>{{ s.name }}</td>
<td>{{ s.gender }}</td>
<td>{{ s.age }}</td>
{# <td>{{ s.classes }}</td>#}
<td><input type="text" v-bind:value="s.classes"></td>
<td>{{ s.grade }}</td>
<td>
<button class="btn btn-primary">修改</button>
<button class="btn btn-warning">详情</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
<ul class="pagination" style="float:right;">
<li v-for="p in page_range" class="paginate_button page-item active">
<a v-on:click="reload" class="page-link">{{ p }}</a>
</li>
</ul>
</div>
{% endverbatim myblock %}