<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src=".https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <table cellpadding="20" cellspacing="0"> <thead> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>成绩</th> <th>等级</th> </tr> </thead> <tbody> <tr v-for="(item,index) in tableData" :key="item.id"> <td>{{index+1}}</td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.grade}}</td> <td>{{item.score}}</td> <td> <span style="color:#F70707" v-if="item.score<60">不及格</span> <span style="color:#E6A23c" v-if="item.score >60 && item.score<75">及格</span> <span style="color:#06fa4f" v-if="item.score>75 && item.score<90">良好</span> <span style="color:#F70707" v-if="item.score>=90">优秀</span> </td> </tr> </tbody> </table> </div> <script> new Vue({ el:"#app", data() { return { tableData:[ {id:1001,name:"张三",age:20,grade:"1班",score:100}, {id:2002,name:"李四",age:21,grade:"2班",score:70}, {id:3003,name:"王五",age:22,grade:"3班",score:59}, {id:3003,name:"老六",age:24,grade:"4班",score:80}, ] }; }, }); </script> </body> </html>
时间: 2024-02-16 12:27:16 浏览: 73
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
这是一个使用Vue.js框架的表格渲染页面,展示了一些学生的信息,包括学号、姓名、年龄、班级、成绩和等级。其中等级是根据成绩自动计算出来的。使用了Vue.js的指令v-for来遍历tableData数组中的数据,使用了v-if指令来根据成绩判断等级并进行颜色展示。整个页面使用了HTML、CSS和JavaScript技术实现。
阅读全文