1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>User List</title>
  6. <link href="/css/publicCSS.css" rel="stylesheet" type="text/css">
  7. <link href="/css/font-all.css" rel="stylesheet" type="text/css">
  8. <script src=/js/jquery.min.js"></script>
  9. <script src=/js/layer/layer.js"></script>
  10. <script src="https://vuejs.org/js/vue.min.js"></script>
  11. </head>
  12. <body>
  13. <!--表格样式1-->
  14. <div class="panel_ZH">
  15. <div class="line_header"><i class="fas fa-table"></i> 表格1
  16. <div class="line_header_R"><i class="fas fa-plus"></i> <i class="fas fa-caret-left"></i> <i
  17. class="fas fa-caret-down"></i> <i class="fas fa-caret-right"></i> <i class="fas fa-chevron-up"></i> <i
  18. class="fas fa-chevron-down"></i> <i class="fas fa-chevron-left"></i> <i
  19. class="fas fa-chevron-right"></i> <i class="fas fa-check"></i></div>
  20. </div><!--line_header-->
  21. <table class="table201801" id="userList">
  22. <tbody>
  23. <tr>
  24. <th>操作</th>
  25. <th>账号</th>
  26. <th>中文名</th>
  27. <th>英文名</th>
  28. <th>所属公司</th>
  29.  
  30. <th>所属平台</th>
  31. <th>是否有效</th>
  32. <th>最后登录时间</th>
  33. <th>创建人</th>
  34. <th>创建时间</th>
  35. </tr>
  36. <tr v-for="item in userList">
  37. <td><i class="fas fa-pencil-alt"></i>   <i class="fas fa-trash-alt"></i></td>
  38. <td>{{item.account}}</td>
  39. <td>{{item.userNameCn}}</td>
  40. <td>{{item.userNameEn}}</td>
  41. <td>{{item.companyId}}</td>
  42. <td>{{item.platformId}}</td>
  43.  
  44. <td>{{item.isValid}}</td>
  45. <td>{{item.lastLoginTime}}</td>
  46. <td>{{item.createUserId}}</td>
  47. <td>{{item.createTime}}</td>
  48.  
  49. </tr>
  50.  
  51. </tbody>
  52. </table><!--table201801-->
  53. </div><!--panel_ZH-->
  54. </body>
  55. </html>
  56. <script>
  57. //不用ajax调数直接用json当数据
  58. var v1=new Vue({
  59. el:"#userList",
  60. data:{
  61. 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"}]
  62. }
  63. });
  64.  
  65. $(function () {
  66. loadData();
  67. });
  68.  
  69. function loadData() {
  70. var postdata = {pageIndex: "1"};
  71. $.ajax3({
  72. url: "/webapi/getlist",
  73. data:postdata,
  74. success: function (r) {
  75. console.log("OK"+JSON.stringify(r))
  76. if (r != null && r.code == 1 && r.data.list.length>0) {
  77. console.log("list:"+JSON.stringify(r.data.list))
  78. v1.userList=r.data.list;
  79. //bindData(r.data);
  80. }
  81.  
  82. }
  83. });
  84. }
  85.  
  86. </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. Canvas 绘图学习笔记2

    1 绘制文本 fillText(string,x,y,maxWidth)  //填充试绘制文本 strokeText(string,x,y,maxWidth) 画线试绘制文本 设置字体样式: cont ...

  2. Kubernetes入门-集群安装

    Kubernetes是谷歌开源的容器集群编排平台,是一个完备的分布式系统支撑平台,为容器化应用提供部署运行.资源调度.服务发现和动态伸缩等一系列完整功能,具有强大的故障发现和自我修复机制.服务滚动升级 ...

  3. Python Learning: 02

    OK, let's continue. Conditional Judgments and Loop if if-else if-elif-else while for break continue ...

  4. ANT与SVN集成

    需求描述:从SVN服务器检出最新代码,编译,打包,发布测试环境. 解决方案:使用ANT官网提供的扩展工具中的svnant检出代码. 环境介绍: 操作系统:windows 7 64bit ant版本:a ...

  5. eclipse java formater 配置详解

    comment.insert_new_line_before_root_tags(insert/do_not_insert):在Javadoc根标记块前插入空行,默认为insert: insert_s ...

  6. 基本MVVM 和 ICommand用法举例(转)

    引言 在本贴中,我们将学习WPF Commands. Commands 可以很好地与 MVVM 模式 (Model- View-ViewModel)结合在一起.我们也将看到,视图(view)实际上是怎 ...

  7. js斐波拉切

    如下: //1 1 2 3 5 8 13 21...//斐波拉切 function fei(n){ if(n==1 || n==2){ return 1 }else{ return fei(n-1)+ ...

  8. Linux新手随手笔记1.7

    配置网卡(本地电脑) Vment1   仅主机模式 Vment8   nat模式 物理机 : 192.16810.1  /255.255.255.0 服务器 : 192.168.10.10 /255. ...

  9. php支持解密的加密算法示例

    其实只是对位运算符的一种简单的应用. <?php class Helper_Inpass{ private $keys='thisismytoken';//token function inpa ...

  10. 13 在 Django REST framework 善用 SerializerMethodField方法

    01-使用SerializerMethodField 来优化不必要的查询 class RepairQueueSerializer(serializers.ModelSerializer): # rq_ ...