<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>User List</title> <link href="/css/publicCSS.css" rel="stylesheet" type="text/css"> <link href="/css/font-all.css" rel="stylesheet" type="text/css"> <script src=/js/jquery.min.js"></script> <script src=/js/layer/layer.js"></script> <script src="https://vuejs.org/js/vue.min.js"></script> </head> <body> <!--表格样式1--> <div class="panel_ZH"> <div class="line_header"><i class="fas fa-table"></i> 表格1 <div class="line_header_R"><i class="fas fa-plus"></i> <i class="fas fa-caret-left"></i> <i class="fas fa-caret-down"></i> <i class="fas fa-caret-right"></i> <i class="fas fa-chevron-up"></i> <i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-left"></i> <i class="fas fa-chevron-right"></i> <i class="fas fa-check"></i></div> </div><!--line_header--> <table class="table201801" id="userList"> <tbody> <tr> <th>操作</th> <th>账号</th> <th>中文名</th> <th>英文名</th> <th>所属公司</th> <th>所属平台</th> <th>是否有效</th> <th>最后登录时间</th> <th>创建人</th> <th>创建时间</th> </tr> <tr v-for="item in userList"> <td><i class="fas fa-pencil-alt"></i> <i class="fas fa-trash-alt"></i></td> <td>{{item.account}}</td> <td>{{item.userNameCn}}</td> <td>{{item.userNameEn}}</td> <td>{{item.companyId}}</td> <td>{{item.platformId}}</td> <td>{{item.isValid}}</td> <td>{{item.lastLoginTime}}</td> <td>{{item.createUserId}}</td> <td>{{item.createTime}}</td> </tr> </tbody> </table><!--table201801--> </div><!--panel_ZH--> </body> </html> <script> //不用ajax调数直接用json当数据 var v1=new Vue({ el:"#userList", data:{ userList:[]//[{"account":"admin","companyId":0,"createTime":"2018-07-31 09:24:24","createUserId":0,"isValid":1,"lastLoginTime":null,"platformId":1,"remark":"","roleIdstr":"","updateTime":null,"updateUserId":0,"userId":1,"userNameCn":"管理员","userNameEn":"Administrator"},{"account":"admin2","companyId":1,"createTime":"2018-07-31 09:24:24","createUserId":0,"isValid":1,"lastLoginTime":null,"platformId":1,"remark":"","roleIdstr":"","updateTime":null,"updateUserId":0,"userId":2,"userNameCn":"管理员2","userNameEn":"Administrator2"}] } }); $(function () { loadData(); }); function loadData() { var postdata = {pageIndex: "1"}; $.ajax3({ url: "/webapi/getlist", data:postdata, success: function (r) { console.log("OK"+JSON.stringify(r)) if (r != null && r.code == 1 && r.data.list.length>0) { console.log("list:"+JSON.stringify(r.data.list)) v1.userList=r.data.list; //bindData(r.data); } } }); } </script>