<!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. Handler,Looper,MessageQueue流程梳理

    目的:handle的出现主要是为了解决线程间通讯. 举个例子,android是不允许在主线程中访问网络,因为这样会阻塞主线程,影响性能,所以访问网络都是放在子线程中执行,对于网络返回的结果则需要显示在 ...

  2. linux下oracle启动关闭

    1.以oracle身份登录数据库,命令:su – oracle 2.执行以下命令查看数据库监听器的状况: lsnrctl status 3.执行以下命令停止数据库监听器运行: lsnrctl stop ...

  3. 使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js

    前言:前端小白一枚,刚注册博客,先发个学习过程中新碰到小问题试试水吧~ 摘要:最近在学习bootstrap,偶然碰到了一个小问题,bootstrap网站也没有做过多的解释,今天分享给大家. 问题描述: ...

  4. ES6的Map如何遍历

    projectMap.forEach(function (value, key, map) { //value和key就是map的key,value,map是map本身 });

  5. 【spring源码分析】IOC容器初始化(九)

    前言:上篇文章末尾提到createBeanInstance方法中使用工厂方法实例化Bean对象,本文将对该方法进行分析. AbstractAutowireCapableBeanFactory#inst ...

  6. 好程序员web前端分享如何理解JS的单线程

    好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...

  7. Vue(五)Vue规范

    代码规范很重要 1.组件名应该始终是多个单词的,根组件 App 除外. 2.组件的 data 必须是一个函数. // In a .vue file export default { data () { ...

  8. node+mysql,实现基本的增删改查,附带跟踪记录和运行时间记录

    Node + mysql 实现基础的增删改查,以及性能测试. 网上有很多这样的例子,我也是找来学习的. 感觉node对mysql的操作非常简单,也很实用,比如自带防止sql注入的功能,一开始还担心注入 ...

  9. Centos7修改yum源

    1. 备份本地yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo_bak 2.获取阿里yum源配置文 ...

  10. 接口Set

    Set接口简介 java.util.Set 接口和 java.util.List 接口一样,同样继承自 Collection 接口,它与 Collection 接口中的方法基本一致,并没有对 Coll ...