<style>
table{
width: 600px;
margin: 0 auto;
text-align: center;
border-collapse: collapse; /*合并边框哦*/
}
tr th,tr td{
border: 1px solid pink;
}
</style>
<script src="../vue.js"></script>
<script src="../axios.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th> <th>年龄</th> <th>性别</th> <th>工作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in users">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.job}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
users:[]
}
}); axios.get("./server.json").then(function (response) {
console.log(response.data);//返回的是一个数组
vm.users=response.data;
}).catch(function (err) {
console.log(err)
})
</script>

  

//server.json文件内容

{
"users": [
{"name":"张三", "age": 18, "sex": "男", "job":"web开发"},
{"name":"李四", "age": 19, "sex": "女", "job":"UI设计"},
{"name":"王五", "age": 20, "sex": "男", "job":"java开发"},
{"name":"赵六", "age": 21, "sex": "女", "job":"php开发"}
]
}

  

axios+vue实现动态渲染员工数据+数据是对象的更多相关文章

  1. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  2. vue使用动态渲染v-model输入框无法输入内容

    最近使用ElementUI框架,在动态渲染表单的时候,表单框无法输入内容,但是绑定model的数据是会发生变化 解决方法: 将动态生成的表单对象,深拷贝到 data 对象中 <el-date-p ...

  3. Django动态渲染多层菜单

    为后续给菜单设置权限管理方便,通过给页面模版菜单动态渲染,通过数据菜单表进行匹配需要渲染的菜单 #Django表结构 class Menus(models.Model): name = models. ...

  4. 前端向服务器请求数据并渲染的方式(ajax/jQuery/axios/vue)

    原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result

  5. vue服务端渲染axios预取数据

    首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...

  6. vue 动态渲染数据很慢或不渲染

    vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...

  7. Vue电商后台管理系统项目第2天-首页添加表格动态渲染数据&分页

    0x01.使用Github学习的姿势 基于昨天的内容,今天的内容需要添加几个单文件组件,路由文件也需要做相应的增加,今天重点记录使用Element-UI中的表格组件实现数据动态渲染的实现流程和分页功能 ...

  8. mock axios vue的数据传递关系

    最近有一个项目要快速出一个前端demo,选择了vue-element框架(虽然其实很想用react,但是为了求快) 本人的基础只有初级的html/css/js知识,和python后端的一些简单工作,和 ...

  9. ListView实现下拉动态渲染数据

    欢迎讨论欢迎一起学习:微信jkxx123321 这是一篇关于LIstView实现动态数据渲染的文章![RN] 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据是100条+ ...

随机推荐

  1. Nginx一般配置

    文件为 nginx.conf ,一般配置内容如下: user root;worker_processes auto;#pid /var/run/nginx.pid;#error_log /dev/st ...

  2. 如何去除小程序button的边框

    小程序button 自带样式,就算用 border:none: background:none ,还是会有一条细的边框 使用:after选择器就可以去除 button::after{ border:n ...

  3. hadoop节点动态删除与增加

    动态删除 1)修改配置文件 修改hdfs-site.xml文件,适当减小dfs.replication的数量,增加dfs.hosts.exclude选项 vi hdfs-site.xml <pr ...

  4. 从公司实际沟通中-得知bug的描述与为什么要bug留痕

    从公司实际沟通中-得知bug的描述与为什么要bug留痕 最近在做的一个实际项目.下图为我们的聊天记录,仔细看图,领悟: 从中预期可以学习到的: 1)实际公司--Bug描述的另一个方法: 2)实际公司- ...

  5. 03-Node.js学习笔记-系统模块path路径操作

    3.1为什么要进行路径拼接 不同操作系统的路径分隔符不统一 /public/uploads/avatar window 上是 \ / 都可以 Linux 上是 / 3.2路径拼接语法 path.joi ...

  6. Educational Codeforces Round 76 (Rated for Div. 2)

    传送门 A. Two Rival Students 签到. Code /* * Author: heyuhhh * Created Time: 2019/11/13 22:37:26 */ #incl ...

  7. AcWing 803. 区间合并

    网址 https://www.acwing.com/solution/AcWing/content/1590/ 题目描述给定n个区间[l, r]. 合并所有有交集的区间. 输出合并完成后的区间个数. ...

  8. C语言解决汉诺塔问题!

    很难受,看了很多资料才明白..... 对这个问题分析,发现思路如下:有n个黄金盘,要先把n-1个弄到B柱上,再把第n个弄到C柱上,然后把n-1个借助A柱弄到C柱上. 实现的函数如下: void f(i ...

  9. LDAP认证

    1.LDAP介绍 LDAP,(Light Directory Access Protocol),基于X.500标准的轻量级目录访问协议,类似于目录服务一样,是一个为查询浏览和搜索的数据库,优势在于他的 ...

  10. 时间time()和$_SERVER['REQUEST_TIME']

    文件ab1.php <?phpforeach($i=0;$i<1000;$i++){ echo $time();} 结果: 文件ab2.php <?php foreach($i=0; ...