通过Vue完成表格数据的渲染展示
最终结果为：
<!DOCTYPE html>
<html lang="en"><head><script src="vue.js">//引入vue文件</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head><body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(stu, index) in student"><td>{{index}}</td><td>{{stu.name}}</td><td>{{stu.age}}</td><td><span v-if="stu.gender==1">男</span><span v-if="stu.gender==2">女</span></td><td>{{stu.score}}</td><td><span v-if="stu.score>=90">优秀</span><span v-if="stu.score>=60 && stu.score<90">及格</span><span style="color:red;" v-if="stu.score<60">不及格</span></td></tr></table>
</body></html>
<script>//定义vue对象new Vue({el: "#app",//vue所接管的区域data: {student: [{name: "A",age: 18,gender: 1,score: 59}, {name: "B",age: 19,gender: 2,score: 70}, {name: "C",age: 20,gender: 1,score: 80}, {name: "D",age: 21,gender: 2,score: 90}]},methods: {},})
</script>
