基于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/getById2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别：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>
![[STM32] 4-2 USART与串口通信(2)](http://pic.xiahunao.cn/nshx/[STM32] 4-2 USART与串口通信(2))
