使用 table 表格的方式渲染出学生成绩信息

要求如下：

其中成绩>=90，显示“优秀"；80<= 成绩<90，显示“良好"，60<=成绩<80，显示及格；成绩<60，显示“不及格"。成绩大于等于 90 分的学员，背景使用“#7DB3FA"高亮显示。

效果图：

样式代码如下：

<style>#app {text-align: center;border-color: rgb(214, 207, 207);}.youxiu {background-color: #7DB3FA;}</style>

其次

<body><!-- 一、使用 table 表格的方式渲染出如下学生成绩信息，其中成绩>=90，显示“优秀"；80<=
成绩<90，显示“良好"，60<=成绩<80，显示及格；成绩<60，显示“不及格"。成绩大于等于
90 分的学员，背景使用“#7DB3FA"高亮显示。
[
{id: 1,name: '诸葛亮',sex: '男',score: 98},
{id: 2,name: '周瑜',sex: '男',score: 88},
{id: 3,name: '刘阿斗',sex: '男',score: 50},
{id: 4,name: '曹植',sex: '男',score: 90},
{id: 5,name: '张飞',sex: '男',score: 70},
{id: 6,name: '曹丕',sex: '男',score: 55}
] --><table border="1" cellspacing="0" width="600px" height="300" id="app"><tr :style="{background:'#ccc'}"><td>id</td><td>姓名</td><td>性别</td><td>成绩</td><td>等级</td></tr><tr v-for="(item, index) in arr" :class="{'youxiu':item.score>=90}"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.sex}}</td><td>{{item.score}}</td><td v-if="item.score>=90">优秀</td><td v-else-if="item.score>=80">良好</td><td v-else-if="item.score>=60">及格</td><td v-else>不及格</td></tr></table><script>new Vue({el: '#app',data: {arr: [{id: 1,name: '诸葛亮',sex: '男',score: 98}, {id: 2,name: '周瑜',sex: '男',score: 88}, {id: 3,name: '刘阿斗',sex: '男',score: 50}, {id: 4,name: '曹植',sex: '男',score: 90}, {id: 5,name: '张飞',sex: '男',score: 70}, {id: 6,name: '曹丕',sex: '男',score: 55}]},});</script>
</body>

使用 table 表格的方式渲染出学生成绩信息相关推荐

OpenGL使用纯VBO方式渲染出三角形，非VAO
OpenGL使用纯VBO方式渲染出三角形,要设置兼容格式GLFW_OPENGL_COMPAT_PROFILE. // 必须使用VAO渲染 //glfwWindowHint(GLFW_OPENG ...
基于jsp+mysql+mybatis+Spring boot简单学生成绩信息管理系统
1.项目开发背景和意义随着科学技术的快速发展和不断提高,尤其是计算机科学技术的日渐普及,其功能的强大以及运行速度已经被人们深刻地了解.近几年来高校的办学模式多元化和学校规模的扩大,为了实现对学生信息 ...
C语言学生成绩信息管理系统课程设计报告
C语言课程设计报告一 .设计目的学生成绩管理系统主要功能: (1)能按学期.按班级完成对学生成绩的录入. 修改,删除 (2)能按班级统计学生的成绩,求学生的总分及平均分,并能根据学生的平均成绩 ...
C语言编写学生成绩信息管理系统
用C语言设计简单的学生成绩信息管理系统介绍代码结构体数组的定义 home_page() 函数 add_infor() 函数 browse_infor() 函数 find_infor() 函数 m ...
基于JavaWeb学生成绩信息管理系统(附源码资料)-毕业设计
1. 适用人群本课程主要是针对计算机专业相关正在做毕业设计.或者是需要实战项目的Java开发学习者. 2. 你将收获提供:项目源码.项目文档.数据库脚本.软件工具等所有资料(在平台的课程附件中进行 ...
任务2 学生成绩信息管理系统
系列文章任务2 学生成绩信息管理系统某班级学生C语言第一次正考的成绩存于数据文件score.txt中,记录了学生学号.姓名和考试成绩,bk.txt文件中记录了补考学生的学号.姓名和补考成绩,编写程 ...
C#程序代码连接SQL Server数据库实现学生成绩信息管理系统（重置版）
目录一.创建数据库表和配置SQL数据库连接信息 1.创建数据库表 2.配置数据库连接信息二.配置程序代码 1.StudentAccount类 2.Student类 3.TeacherAccount ...
基于python+tkinter的学生成绩信息管理系统
基于python+tkinter的学生成绩信息管理系统系统设计 2.开发工具开发语言:python3.6.8 开发工具:JetBrains PyCharm 2019.1.2 x64 使用三方模块: ...
学生成绩表c语言,学生成绩信息表(c语言程序)
<学生成绩信息表(c语言程序)>由会员分享,可在线阅读,更多相关<学生成绩信息表(c语言程序)(16页珍藏版)>请在人人文库网上搜索. 1. include# include# ...

使用 table 表格的方式渲染出学生成绩信息

使用 table 表格的方式渲染出学生成绩信息相关推荐

最新文章

热门文章