axios+vue实现动态渲染员工数据+数据是对象

 <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开发"}]
}

转载于:https://www.cnblogs.com/IwishIcould/p/10434635.html

axios+vue实现动态渲染员工数据+数据是对象相关推荐

js动态渲染html页面,利用Scrapy-Splash抓取JS动态渲染的网页数据
随着越来越多的网站开始用JS在客户端浏览器动态渲染网站,导致很多我们需要的数据并不能由原始的html中获取,再加上Scrapy本身并不提供JS渲染解析的功能,通常对这类网站数据的爬取我们一般采用两种方 ...
自己解决在Vue中动态渲染图片不显示的问题
乐于助人前言分析思路 1. 绝对路径 2. 相对路径总结本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题,心里路程比较多,所以话比较多哈哈,感谢阅读,大概耗时2分钟前言如上 ...
Vue中动态渲染输入框并v-model绑定后无法输入
最近遇到一个根据后台返回来动态渲染表单的需求,但是input在v-model后无法输入了. 原因:Vue无法检测普通的新增属性解决:通过this.$set()新增 <el-form :mode ...
vue如何动态渲染本地图片img
动态渲染本地图片 <div class="wrap_left" v-for="item of array" :key="item.id" ...
Vue路由动态渲染和动态传参
一.动态渲染路由 // router/routerjs{ path: '/movie/1', component: Movie}, //app组件<router-link to="/m ...
Vue实现动态加载页面数据（下拉加载新数据）
1 设置数据 //页面不同组的所有数据alldata:[],//当前的页数page: 1, 2 更新页面格式 <div > <d ...
vue中动态渲染组件
https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/114403 ...
vue里面动态渲染图片?
1.把图片放在public 文件夹下面 2.把图片存在一个数组里面 <script setup>let boxArr = [//图片1{id: 1,headerLeft: "#交 ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

axios+vue实现动态渲染员工数据+数据是对象

axios+vue实现动态渲染员工数据+数据是对象相关推荐

最新文章

热门文章