当前位置: 首页 > news >正文

Day03-作业(AxiosElementUI)

作业1: 根据需求完成如下页面数据列表展示

需求:Vue挂载完成后,通过axios发送异步请求到服务端,获取学生列表数据,并通过Vue展示在页面上

获取数据url:http://yapi.smart-xwork.cn/mock/169327/student

素材:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>作业01</title><script src="js/vue.js"></script><script src="js/axios-0.18.0.js"></script>
</head>
<body><!-- 需求: Vue挂载完成后,通过axios发送异步请求到服务端,或者学生列表数据,并通过Vue展示在页面上. --><div id="app"><table border="1" cellspacing="0" width="80%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center"><td>1</td><td>张三</td><td><img src="https://web-tlias.oss-cn-hangzhou.aliyuncs.com/1.jpg" height="50" width="70"></td><td>18</td><td><span>男</span><span>女</span></td><td>100</td><td><span style="color: green;">优秀</span><span style="color: yellow;">及格</span><span style="color: red;">不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {students: []}})
</script>
</html>

说明:

  • 性别 gender:1 为男,2为女。

  • 分数 score:

    • >= 85 优秀

    • >= 60 并且 <85 及格

    • < 60 不及格

效果展示:


作业2: 使用ElementUI绘制如下页面

需求:Vue挂载完成后,通过axios发送异步请求到服务端,获取品牌列表数据,并通过Vue展示在页面上

获取数据url:https://mock.apifox.cn/m2/2031273-0-default/99613695icon-default.png?t=N6B9https://mock.apifox.cn/m2/2031273-0-default/99613695

效果展示:

http://www.lryc.cn/news/104136.html

相关文章:

  • 低代码开发平台源码:基于模型驱动,内置功能强大的建模引擎,零代码也能快速创建智能化、移动化的企业应用程序
  • 下载JMeter的历史版本——个人推荐5.2.1版本
  • 2023-07-30 LeetCode每日一题(环形链表 II)
  • 设计模式——简单工厂模式
  • AnimatedVectorDrawable矢量图动画的使用和修改
  • 【C++】—— 多态的基本介绍
  • 一文详解:自动化测试工具——Selenium
  • [模版总结] - 集合划分类DFS模版
  • JavaScript中复制新的数组与原数组删除某个值——不影响新复制的数组的方法详解
  • easyui主表子表维护页面
  • k8s exam
  • C#,中国福利彩票《刮刮乐》的数学算法(02)——时来运转
  • 我的观影记录表【个人向】
  • 网络安全策略应包含哪些?
  • 【Git】Git GitHub
  • [STL]详解list模拟实现
  • C和C++的区别与联系
  • springboot通过接口执行本地shell脚本
  • 工欲善其事必先利其器,IT工作电脑更要维护好
  • 移动端个人中心UI设计
  • 开发接口,你需要先搞懂这些概念!
  • zookeeper常用命令
  • 亚马逊水基灭火器UL8测试报告ISO17025实验室办理
  • Shell学习脚本-if多分支结构
  • [SQL挖掘机] - 窗口函数 - lead
  • PyTorch Lightning教程四:超参数的使用
  • 2023 蓝桥杯真题B组 C/C++
  • 视频怎样分割成两段?分享几种视频分割方法
  • cyber_back
  • 价值 1k 嵌入式面试题-单片机 main 函数之前都做了啥?