Vue实现学生信息管理页面
一. 实验目的
1.掌握HTML基础知识的应用；
2.掌握Vue基本架构的应用；
3.掌握内容渲染指令的使用；
4.掌握事件绑定指令的使用；
5.掌握列表渲染指令的使用；
6.掌握双向数据绑定指令的使用；
7.实现一个学生信息管理页面。
二. 实验步骤（及实验数据）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息管理页面</title>
<style>
* {
margin: 0px;
padding: 0px;
font-size: 18px;
}
h3 {
text-align: center;
margin: 20px 0px;
font-size: 36px;
}
.inputInfo {
width: 800px;
margin: 0px auto;
margin-bottom: 18px;
}
.inputInfo input[type="text"],
.inputInfo input[type="number"] {
width: 700px;
height: 32px;
border-radius: 4px;
padding-left: 6px;
}
.inputInfo input[type="radio"] {
margin-right: 6px;
margin-left: 6px;
}
.inputInfo select {
width: 100px;
height: 32px;
border-radius: 4px;
}
.btnStyle {
display: block;
padding: 6px 12px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
color: white;
border: 1px solid transparent;
border-radius: 8px;
margin: 0px auto;
margin-bottom: 20px;
}
.createBtn {
background-color: #d9534f;
border-color: #d43f3a;
}
.optionBtn {
width: 800px;
margin: 0px auto;
}
.optionBtn>button {
display: inline-block;
margin-left: 10px;
}
.averageBtn,
.sortBtn {
background-color: #E5E5E5;
border-color: #E5E5E5;
color: #333;
margin: 20px auto;
}
.studentList {
width: 800px;
margin: 0px auto;
border-collapse: collapse;
}
.studentList thead tr td {
background-color: #6495ED;
}
.studentList thead tr td>a {
font-size: 24px;
text-decoration: none;
color: #333;
}
.studentList td {
height: 60px;
text-align: center;
border: 1px solid #ddd;
font-size: 24px;
}
.deleteBtn {
background-color: #428bca;
border-color: #357ebd;
margin: 0px auto;
}
.searchBtn {
background-color: #5bc0de;
border-color: #46b8da;
height: 20px;
margin: 0px 10px;
font-size: 14px;
}
.searchInfo {
width: 800px;
height: 50px;
margin: 0px auto;
line-height: 50px;
font-size: 24px;
}
.searchInfo>input {
height: 28px;
border-radius: 4px;
padding-left: 6px;
}
.searchInfo>button {
height: 34px;
font-size: 20px;
line-height: 20px;
display: inline-block;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
<h3>学生信息录入系统</h3>
<!-- 学生信息输入表单 -->
<div class="inputInfo">
<label for="studentName">姓名：</label>
<input type="text" id="studentName" v-model="StudentNewMessage.stuName" placeholder="请输入学生的姓名......" />
</div>
<div class="inputInfo">
<label for="studentID">学号：</label>
<input type="text" id="studentID" v-model="StudentNewMessage.stuID" placeholder="请输入学生的学号......"/>
</div>
<div class="inputInfo">
<label for="studentAge">年龄：</label>
<input type="number" id="studentAge" v-model.number="StudentNewMessage.age" placeholder="请输入学生的年龄......"/>
</div>
<div class="inputInfo">
<span>性别：</span>
<input type="radio" value="男生" name="gender" id="boy" v-model="StudentNewMessage.gender" />
<label for="boy">男生</label>
<input type="radio" value="女生" name="gender" id="girl" v-model="StudentNewMessage.gender"/>
<label for="girl">女生</label>
</div>
<div class="inputInfo">
<span>地址：</span>
<select v-model="StudentNewMessage.address">
<option value="请选择">请选择</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="海南省">海南省</option>
<option value="湖南省">湖南省</option>
</select>
</div>
<button class="btnStyle createBtn" @click="insertStuMessage()">创建学生信息</button>
<hr />
<!-- 学生信息列表 -->
<h3>学生信息列表</h3>
<div class="optionBtn">
</div>
<table class="studentList">
<thead>
<tr>
<td>姓名</td>
<td>学号</td>
<!-- // javascript:void(0) 用于阻止a标签的默认行为 阻止跳转-->
<td><a href="javascript:void(0)" @click="StuAgeEstimate()">年龄↑</a></td>
<td>性别</td>
<td>地址</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in students" :key="item.stuID">
<td>{{item.stuName}}</td>
<td>{{item.stuID}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
<td>{{item.address}}</td>
<td>
<button class="btnStyle deleteBtn" @click="deleteStuMessage(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<div class="searchInfo">
按姓名搜索：<input type="text" v-model="StuNameSearch" />
<button class="btnStyle searchBtn" @click="StuSearch()">搜索</button>
</div>
</div>
<!-- 以下是Vue.js框架练习代码，请补充 -->
<script>
var app=Vue.createApp({
data(){
return {
students: [{
stuName: '张三',
stuID: 10,
age: 20,
gender: '男生',
address: '四川省'
},
{
stuName: '李四',
stuID: 11,
age: 18,
gender: '男生',
address: '海南省'
},
{
stuName: '王五',
stuID: 12,
age: 19,
gender: '女生',
address: '山东省'
}
],
StudentNewMessage:{
stuName: '',
stuID: '',
age:0,
gender: '',
address: ''
},//存储新添加的学生信息
}
},
methods: {
// 添加学生信息
insertStuMessage() {
// 判断学生信息是否填写完整
// !== 用于判断两个值是否不相等 === 用于判断两个值是否相等
if (this.StudentNewMessage.stuName === '') {
alert('学生姓名不能为空！');
return;
} else if (this.StudentNewMessage.stuID === '') {
alert('学生学号不能为空！');
return;
} else if (this.StudentNewMessage.age === '' || this.StudentNewMessage.age <= 10) {
alert('学生年龄不能小于10岁！');
return;
} else if (this.StudentNewMessage.gender === '') {
alert('学生性别不能为空！');
return;
} else if (this.StudentNewMessage.address === '请选择' || this.StudentNewMessage.address === '') {
alert('学生未选择地址！');
return;
} else {
//将新添加的学生信息添加到students数组中
this.students.push(this.StudentNewMessage);
this.StudentNewMessage = {};
}
},
// 按年龄排序
StuAgeEstimate() {
this.students.sort((a, b) => {
return a.age - b.age;
})
},
// 删除学生信息
deleteStuMessage(index){
this.students.splice(index,1);
},
// 按姓名搜索
StuSearch() {
// 判断是否输入了学生姓名
if (this.StuNameSearch === '') {
alert('请输入学生姓名！');
return;
} else {
// 遍历students数组，查找是否有符合条件的学生
for (let i = 0; i < this.students.length; i++) {
if (this.students[i].stuName === this.StuNameSearch) {
// 将符合条件的学生信息存储到一个新数组中
let stuSearch = [];
stuSearch.push(this.students[i]);
// 将符合条件的学生信息替换students数组
this.students = stuSearch;
return;
}
}
// 如果遍历完students数组后，没有符合条件的学生，则提示没有该学生
alert('没有该学生！');
}
}
}
}).mount("#app");
</script>
</body>
</html>
详情见：https://www.mingorfang.top/post/329dd7a6.html
本文转载自: https://blog.csdn.net/weixin_46287861/article/details/130011720
版权归原作者 爱捣鼓的XiaoPu 所有， 如有侵权，请联系我们删除。
版权归原作者 爱捣鼓的XiaoPu 所有， 如有侵权，请联系我们删除。