全部代码:
<!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-mo