vue.js基本使方法v-for实现对表格渲染+ajax

Vue.js是一套构建用户界面的渐进式框架。

话不多说直接附上代码

表格部分，通过单机事件调用函数

 <div  class="layui-form" id="Ai">
                      <table class="layui-table" id="allinformation">
                          <colgroup>
                              <col width="auto">
                              <col width="auto">
                              <col width="auto">
                              <col width="auto">
                              <col width="auto">
                              <col width="auto">
                              <col width="auto">
                              <col width="auto">
                          </colgroup>
                          <thead>
                          <tr >
                              <th>姓名</th>
                              <th>性别</th>
                              <th>年龄</th>
                              <th>身份证号</th>
                              <th>手机号</th>
                              <th>家庭住址</th>
                              <th>职位</th>
                              <th>执行操作</th>
                          </tr>
                          </thead>
                          <tbody>
                          <tr v-for="site in itemss">
                              <td> {{ site.name }}</td>
                              <td> {{ site.sex }}</td>
                              <td> {{ site.age }}</td>
                              <td> {{ site.idcard}}</td>
                              <td> {{ site.phone }}</td>
                              <td> {{ site.place }}</td>
                              <td> {{ site.position }}</td>
                              <td><div class="layui-btn-group">
                                  <button type="button" class="layui-btn"  @click="edit(site.idcard)"><i class="layui-icon"></i></button>
                                  <button type="button" class="layui-btn"  @click="stop(site.idcard)">暂停</button>
                                  <button type="button" class="layui-btn layui-btn-danger" @click="Delete(site.idcard)"><i class="layui-icon"></i></button>
                              </div>
                              </td>
                          </tr>
                          </tbody>
                      </table>
                  </div>
              </div>

ajax部分+vue.js部分

<script>
   function   Information(){
       var tableVue = new Vue({
           el:"#information",//实现表格渲染
           data:{
               itemss:[]
           }
       });
       $.ajax({
           url: "SelectPServlet",
           type: "GET",
           data: {},
           success: function (data) {
               //var data = JSON.parse( jsonObj );//解析json对象
               tableVue.itemss=data;
           },//响应成功后的回调函数
           error: function () {
               alert("出错啦...")
           },//表示如果请求响应出现错误，会执行的回调函数
           dataType: "json"//设置接受到的响应数据的格式
       });
       document.getElementById("Ai").style.display="none";
       document.getElementById("Pi").style.display="block";
   }
</script>