基于vue和ajax分页的列表页的完善

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/g_optimistic/article/details/89109700

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 %}