<!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="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.odd-row {
background-color: white;
}
.even-row {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div>
<h2>添加学生信息</h2>
<form @submit.prevent="addStudent">
<label for="studentId">学号:</label>
<input id="studentId" type="text" v-model="newStudent.xuehao" required>
<br>
<label for="studentName">姓名:</label>
<input id="studentName" type="text" v-model="newStudent.name" required>
<br>
<label>性别:</label>
<input type="radio" id="male" value="男" v-model="newStudent.sex" required>
<label for="male">男</label>
<input type="radio" id="female" value="女" v-model="newStudent.sex" required>
<label for="female">女</label>
<br>
<label for="chinese">语文:</label>
<input id="chinese" type="number" v-model="newStudent.chinese" required>
<br>
<label for="math">数学:</label>
<input id="math" type="number" v-model="newStudent.math" required>
<br>
<label for="english">英语:</label>
<input id="english" type="number" v-model="newStudent.english" required>
<br>
<button type="submit">添加</button>
</form>
</div>
<br>
<div>
<h2>学生信息表</h2>
<table border="1">
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
<th>平均分</th>
<th>操作</th>
</tr>
<tr v-for="(s, index) in students" :class="index % 2 === 0 ? 'even-row' : 'odd-row'">
<td>{{index}}</td>
<td v-for="(value, key, index) in s">
<template v-if="key=='math'||key=='chinese'||key=='english'">
<span>
{{value}}
</span>
</template>
<template v-else>
{{value}}
</template>
</td>
<td>
<a href="" @click="editStudent(index)" style="text-decoration: none;">修改</a>
<a href="" @click="deleteStudent(index)" style="text-decoration: none;">删除</a>
</td>
</tr>
</table>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
students: [
{ xuehao: '189000101', name: "刘备", sex: "男", chinese: 124, math: 102, english: 90 },
{ xuehao: '189000102', name: "关羽", sex: "男", chinese: 115, math: 98, english: 95 },
{ xuehao: '189000103', name: "张飞", sex: "男", chinese: 130, math: 86, english: 68 },
{ xuehao: '189000104', name: "诸葛亮", sex: "男", chinese: 125, math: 145, english: 130 },
{ xuehao: '189000105', name: "赵云", sex: "男", chinese: 118, math: 132, english: 100 },
{ xuehao: '189000106', name: "孙悟空", sex: "男", chinese: 100, math: 100, english: 100 },
// 学生信息数组
],
newStudent: {
xuehao: "",
name: "",
sex: "",
chinese: 0,
math: 0,
english: 0
}
}
},
mounted() {
this.students.forEach((s, index) => {
s.total = s.math + s.chinese + s.english;
s.average = Math.trunc((s.chinese + s.english + s.math) / 3);
});
},
methods: {
editStudent(index) {
// 处理添加学生
console.log("Edit student at index", index);
},
deleteStudent(index) {
// 处理删除学生
this.students.splice(index, 1);
},
addStudent() {
// 检查是否非空
if (this.newStudent.xuehao && this.newStudent.name && this.newStudent.sex && this.newStudent.chinese && this.newStudent.math && this.newStudent.english) {
// 新增学生信息到数组
this.students.push({ ...this.newStudent });
this.newStudent.xuehao = "";
this.newStudent.name = "";
this.newStudent.sex = "";
this.newStudent.chinese = 0;
this.newStudent.math = 0;
this.newStudent.english = 0;
}
}
}
})
app.mount("#app")
</script>
</html>
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
