• vue根据ajax绑定数数。。



    <!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>
    

      

              
                       
  • 相关阅读:
    android的Fragment
    c#接口深入一步探究其作用,适合新人了解
    浅谈c#接口的问题,适合新手来了解
    再谈“我是怎么招聘程序员的”(下)转
    再谈“我是怎么招聘程序员的”(上)转
    关于如何写出优秀的代码(转)
    winserver服务器安全部署详细文档
    VS高效的调试技巧
    常用正则表达式(转自月光博客)
    JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()
  • 原文地址:https://www.cnblogs.com/q149072205/p/9451571.html
Copyright © 2020-2023  润新知