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

　　

                   
                   

vue根据ajax绑定数数。。的更多相关文章

  1. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  2. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. vue使用ajax

    1.Vue的Ajax基本用法 在vue中用Ajax需要用到vue.js和vue-resource.js; vue-resource.js的下载地址:https://cdn.staticfile.org ...

  4. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  5. 【BZOJ】【3530】【SDOI2014】数数

    AC自动机/数位DP orz zyf 好题啊= =同时加深了我对AC自动机(这个应该可以叫Trie图了吧……出边补全!)和数位DP的理解……不过不能自己写出来还真是弱…… /************* ...

  6. Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值

    Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...

  7. BZOJ3530: [Sdoi2014]数数

    3530: [Sdoi2014]数数 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 322  Solved: 188[Submit][Status] ...

  8. 【HDU3530】 [Sdoi2014]数数 （AC自动机+数位DP）

    3530: [Sdoi2014]数数 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 682  Solved: 364 Description 我们称一 ...

  9. COJ 0036 数数happy有多少个？

    数数happy有多少个? 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 图图是个爱动脑子.观察能力很强的好学生.近期他正学英语 ...

随机推荐

  1. UEFI引导的简单恢复方法

    装系统,尤其是双系统,总是无法绕过引导的坑. linux的grub是非常复杂的引导系统,学习它非常累.而windows又不能引导linux.你可能会想,怎么就没有一种简单的引导方式,就好像引导光盘,引 ...

  2. Hadoop 3.1.2(HA)+Zookeeper3.4.13+Hbase1.4.9(HA)+Hive2.3.4+Spark2.4.0(HA)高可用集群搭建

    目录 目录 1.前言 1.1.什么是 Hadoop? 1.1.1.什么是 YARN? 1.2.什么是 Zookeeper? 1.3.什么是 Hbase? 1.4.什么是 Hive 1.5.什么是 Sp ...

  3. python使用rabbitMQ介绍三（发布订阅模式）

    一.模式介绍 在前面的例子中,消息直接发送到queue中. 现在介绍的模式,消息发送到exchange中,消费者把队列绑定到exchange上. 发布-订阅模式是把消息广播到每个消费者,每个消费者接收 ...

  4. Python 进程（一）理论部分

    进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行,即正在运行的程序,是系统进行资源分配和调度的基本单位,进程是对正在运行程序的一个抽象,在早期面向进程设计的计算机结构中,进程是程 ...

  5. Objective-C Block与函数指针比较

    相似点 1.函数指针和Block都可以实现回调的操作,声明上也很相似,实现上都可以看成是一个代码片段. 2.函数指针类型和Block类型都可以作为变量和函数参数的类型.(typedef定义别名之后,这 ...

  6. docker镜像和容器的导出导入

    本文介绍docker镜像和容器的导入导出,用于迁移.备份.升级等场景.主要用到export.import.save.load四个方法. 原文地址:代码汇个人博客 http://www.codehui. ...

  7. i春秋misc部分writeup

    i春秋misc部分writeup 一.敲击 方方格格,然后看到下面的格式,猜测出是键盘上的布局,然后看这些字母形成的形状想那些字母,就是flag了 2.滴滴滴 放到ctfcack里解密,发现时栅栏密码 ...

  8. Java基础系列--06_抽象类与接口概述

    抽象类 (1)如果多个类中存在相同的方法声明,而方法体不一样,我们就可以只提取方法声明. 如果一个方法只有方法声明,没有方法体,那么这个方法必须用抽象修饰. 而一个类中如果有抽象方法,这个类必须定义为 ...

  9. 10-PI开发手册-ERP发布服务供外围系统调用（RFC类型）

      一.      文档信息 版本号* 更新日期* 姓名* 更新内容及更新理由* 备注* V1.0 2019/02/19 fanjb 文档创建 以福利接口13589(Z00HRJ_GJJ_REV_FI ...

  10. vue登录拦截