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

      

              
                       
  • 相关阅读:
    JAVA中SpringMVC获取bean方法,在工具类(utils)注入service
    JAVA中json对象转JAVA对象,JSON数组(JSONArray)转集合(List)
    maven中pom文件中scope的作用
    页面图片懒加载、延迟加载(lazyload)
    js(jQuery)获取自定义data属性的值
    ubantu使用小结
    ipmitool管理工具
    大于2T的硬盘怎么分区
    lamp的动静分离部署
    keepalived脑裂问题
  • 原文地址:https://www.cnblogs.com/q149072205/p/9451571.html
Copyright © 2020-2023  润新知