vue根据ajax绑定数数。。

时间：2023-03-08 17:48:41
<!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>

　　

                   
                   

相关文章