<!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 14:27:16 浏览: 31
这是一个使用Vue.js框架的表格渲染页面,展示了一些学生的信息,包括学号、姓名、年龄、班级、成绩和等级。其中等级是根据成绩自动计算出来的。使用了Vue.js的指令v-for来遍历tableData数组中的数据,使用了v-if指令来根据成绩判断等级并进行颜色展示。整个页面使用了HTML、CSS和JavaScript技术实现。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 绿叶学习网; </body> </html>哪里错了
根据你提供的代码,我发现以下几个问题:
1. 缺少`<!DOCTYPE html>`声明,这个声明告诉浏览器使用哪个HTML版本来解析页面。
2. 缺少`<title>`标签,这个标签用于定义网页的标题,显示在浏览器的标题栏或标签页上。
3. 缺少`<body>`标签内的内容,这个标签用于定义网页的主体内容,可以在其中添加文本、图片、链接等元素。
修正后的代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绿叶学习网</title>
</head>
<body>
绿叶学习网
</body>
</html>
```
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <h1>一级标题</h1> 这里填写具体文本内容 </body> </html>
<!doctype html> 是 HTML5 的文档类型声明,它告诉浏览器这个页面是用 HTML5 编写的。在 HTML 中,<!doctype html> 通常作为 HTML 文档的第一行。
以上代码是一个简单的 HTML 页面的基本结构,由以下几个部分组成:
1. <!doctype html>:文档类型声明,告诉浏览器这个页面是用 HTML5 编写的。
2. <html>:HTML 页面的根元素,包含整个 HTML 文档的内容。
3. <head>:头部元素,包含了一些页面的元数据,如页面标题、样式表和脚本等。
4. <meta charset="utf-8">:字符集声明,告诉浏览器这个页面使用的字符编码为 UTF-8。
5. <title>:页面标题元素,会显示在浏览器的标签页上。
6. <body>:文档的主体元素,包含了网页上的所有内容。
在上面的示例中,我们定义了一个一级标题(<h1>)和一些文本内容。您可以在<body>标签内添加任何您想要的HTML标签来创建各种内容。