基于Vue以及Axios完成数据动态加载展示
1.数据准备的url：https://yapi.pro/mock/401965/user/getById
2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别：1代表男，2代表女）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios-案例</title>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<style>
table {
text-align: center;
margin: 0 auto;
border: 1px solid black;
}
th,td {
border: 1px solid black;
}
</style>
</head>
<!--
基于Vue以及Axios完成数据动态加载展示
1.数据准备的url：https://yapi.pro/mock/401965/user/getById
2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别：1代表男，2代表女）
-->
<body>
<div id="app">
<table cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
<tr v-for="(emp,index) in emps"> <!-- 遍历展示数组emps中的数据 -->
<td >{{index + 1}}</td>
<td>{{emp.name}}</td>
<td>
<img v-bind:src="emp.image" width="70px" height="50px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatedate}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
emps:[] // 赋值给vue中的数据模型emps数组
},
mounted () { // mounted:vue生命周期中的挂载完成状态，当挂载完成后，自动调用axios的get方法用来向服务器请求数据
// 发送异步请求，加载数据
axios.get("https://yapi.pro/mock/401965/user/getById").then(result => { // 将请求到的数据交给一个result对象
/*
调用result中的data属性拿到数据，然后我们只需要拿到服务器中的data这个属性名对应下的属性值即可，因此再次.data
然后把他交给this.emps，this代表的就是当前对象，emps就是vue对象下的一个数据模型（是一个数组）
*/
this.emps = result.data.data;
});
}
})
</script>
</html>本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Ajax-03.Axios-案例
发表评论 取消回复