> 文章列表 > 用vue写学生管理列表

用vue写学生管理列表

文章列表

用vue写学生管理列表

文章目录

家人们直接代码奉上：
效果图

家人们直接代码奉上：

<!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>Title</title><script src="vue.global.js"></script><style>*{padding: 0;margin: 0;}tbody tr:nth-child(odd){background-color: red;}.biao{width: 800px;margin: 20px auto;color: #000;background-color: pink;}tr{height: 30px;text-align: center;}table{width: 100%;}table,th,td{border: 1px solid black;border-collapse: collapse;}</style></head>
<body>
<div id="Application"><div class="biao"><table ><thead><tr><th>序号</th><th>姓名</th><th>学号/工号</th><th>院系</th><th>专业</th><th>班级</th><th>操作</th></tr></thead><tbody><tr v-for="(students,index) in students" :key="index"><td>{{students.id}}</td> <td>{{students.name}}</td> <td>{{students.studyID}}</td> <td>{{students.department}}</td> <td>{{students.major}}</td> <td>{{students.classID}}</td> <td><button @click="del(index)">移除</button></td> </tr></tbody></table></div><div style="text-align: center;"><span>当前共有{{total_students}}名学生</span></div>
</div>
<script>const App = {data() {return {               msg:"welcome to my home!11",students: [{id:1,name:'李宏宇',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:2,name:'唐鑫',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:3,name:'邓聪',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:4,name:'黄礼文',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:5,name:'吴浩',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:6,name:'张涛',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:7,name:'李治泽',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:8,name:'董健',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:9,name:'陈柏',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:10,name:'陈桐',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},{id:11,name:'李娅',studyID:'19205105',department:"信息工程学院",major:'大数据应用',classID:'2019级数据2班'},] ,}},computed:{total_students(){return this.students.length},},// 定义组件的方法methods: {           del(index){this.students.splice(index,1)this.students_lenght -=1},},        }Vue.createApp(App).mount("#Application")
</script></body>
</html>

效果图

用vue写学生管理列表