全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- <script src="js/vue.js"></script> -->
<style>
/* 合并单元格 */
table {
border-collapse: collapse;
position: absolute;
top: 320px;
}
/* 为列名加边框 */
th,
td {
border: 1px solid black;
padding: 10px;
}
/* 实现隔行变色(白色和黄色）的表格显示效果 */
/* 偶数行白色 */
.even-row {
background-color: white;
}
/* 奇数行黄色 */
.odd-row {
background-color: yellow;
}
.info {
border: 2px red solid;
width: 400px;
text-align: center;
}
.add {
position: absolute;
left: 150px;
top: 250px;
}
.inquire {
position: absolute;
left: 150px;
top: 280px;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="root">
<div class="info">
<h1>学生信息添加</h1>
<!-- required 属性是 HTML 表单元素中常用的一个属性，它用于指定表单元素是否必须填写才能提交表单 -->
学号：<input type="text" v-model="info.sno" required /> <span v-if="show">学号不能为空</span><br>
姓名：<input type="text" v-model="info.name" required /><span v-if="show">姓名不能为空</span><br>
性别：<input type="radio" value="男" v-model="info.sex" />男
<input type="radio" value="女" v-model="info.sex" />女 <br>
语文：<input type="text" v-model="info.chinese" /><br>
数学：<input type="text" v-model="info.math" /><br>
英语：<input type="text" v-model="info.english" />
</div>
<button @click="add" class="add">添加</button>
<table>
<!-- 制作表头即为第一行单元格名称（列名） -->
<thead>
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
<th>平均分</th>
<th>操作</th>
</tr>
</thead>
<!-- 制作数据部分 -->
<tbody>
<!-- 读行数 -->
<!-- even-row,odd-row要加引号否则无法识别index%2==0判断是奇数偶数-->
<!-- v-bind绑定标签属性的值缩写为冒号，用三元表达式来确定真假值（0，1）结构(condition) ? value1 : value2，condition 为待判断的条件表达式，如果 condition 为真，则表达式结果为 value1，否则表达式结果为 value2 -->
<tr v-for="(item,index) in student" :class="index%2==0?'even-row':'odd-row'" :key="item">
<td>{{index}}</td>
<td>{{item.sno}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.chinese}}</td>
<td>{{item.math}}</td>
<td>{{item.english}}</td>
<td>{{sum(item)}}</td>
<td>{{average(item)}}</td>
<td><a href="#" @:click="update(index)">修改</a>|<a @click="del(index)" href="#">删除</a></td>
</tr>
</tbody>
</table>
<!-- 查询 -->
<div class="inquire">
<button @click="inquire(info.sno)">查询：</button><input type="text" v-model="info.sno" placeholder="请输入学号:" />
</div>
</template>
</body>
<script>
const app = Vue.createApp({
template: "#root",
data() {
return {
student: [{
sno: '189000101',
name: '刘备',
sex: '男',
chinese: 124,
math: 102,
english: 90
},
{
sno: '189000102',
name: '关羽',
sex: '男',
chinese: 115,
math: 98,
english: 95
},
{
sno: '189000103',
name: '张飞',
sex: '男',
chinese: 130,
math: 86,
english: 68
},
{
sno: '189000104',
name: '诸葛亮',
sex: '男',
chinese: 125,
math: 145,
english: 130
},
{
sno: '189000105',
name: '赵云',
sex: '男',
chinese: 118,
math: 132,
english: 100
},
{
sno: '学号',
name: '姓名',
sex: '男',
chinese: 100,
math: 100,
english: 100
},
],
info: {
sno: '',
name: '',
sex: '女',
chinese: '',
math: '',
english: ''
},
show: false
}
},
methods: {
// 求和函数用item接受item的数据
sum(item) {
// parseFloat用于将字符串转换为浮点数
const sum = parseFloat(item.chinese) + parseFloat(item.math) + parseFloat(item.english)
// 返回值保留一位小数
return sum.toFixed(1)
},
average(item) {
const sum = parseFloat(item.chinese) + parseFloat(item.math) + parseFloat(item.english)
const b = sum / 3
return b.toFixed(1)
},
// 添加操作
add() {
// 判断是否为空
if (this.info.sno == '' || this.info.sno === '') {
this.show = true;
} else {
// 把暂存表信息放到student函数中
this.student.push(this.info);
// 添加成功后清空输入框
this.info = {
sno: '',
name: '',
sex: '女',
chinese: '',
math: '',
english: ''
};
// 添加成功后隐藏提示信息
this.show = false;
}
},
// 删除操作
del(index) {
this.student.splice(index, 1);
},
// 更新操作
update(index) {
this.info = this.student[index];
// 更新成功后清空输入框
},
// 查询操作
inquire(sno) {
if (sno === '') {
// 如果查询框为空，则展示整个数据
this.student = this.student;
} else {
let result = [];
for (let i = 0; i < this.student.length; i++) {
if (this.student[i].sno === sno) {
result.push(this.student[i]);
}
}
this.student = result;
}
},
}
})
app.mount("#app");
</script>
</html>
分析：搭建骨架和环境
1.将该表格数据转换为JavaScript的数组，并存放于Vue的实例中，其中第5条数据请换成考生自己真实的学号姓名和性别。
2．编写代码，将第1步中的数组数据以如下的表格形式显示。
每个行都被表示为一个“tr”元素，其中包含有关该行中每个单元格的信息。每个单元格都在一个“td”元素中定义，并且“th”元素用于定义表头单元格。注意先读行tr在用td展示内容
实现对总分和平均分的统计。
通过计算属性实现（i注意参数）
VS
实现隔行变色(白色和黄色）的表格显示效果
定义：
判断调用
任务二
在页面中设计添加学生表单，其中学号和姓名必须填写，否则点击添加按钮将无法添加学生信息（在此之前在data中添加一个暂存对象info）sex为男是默认；用span标签制作提示，v-if控制显示或者隐藏v-model实现数据的双向绑定(info的数据和输入框的值同时更新)
1.2.实现学生的添加功能:
在methods中写出函数add（）
3.单击“删除”按钮，实现学生的删除功能。(15分)
完善：
加上：key=“唯一值”提高vue性能
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
