首页 前端知识 computed计算属性_学生成绩计算页面(Vue3.0)

computed计算属性_学生成绩计算页面(Vue3.0)

2024-07-27 22:07:07 前端知识 前端哥 766 127 我要收藏

学生成绩计算页面

一. 实验目的

1.掌握HTML基础知识的应用;

2.掌握Vue基本架构的应用;

3.掌握函数方法的定义及使用;

4.掌握methods方法的使用;

5.掌握computed计算属性的使用;

6.实现一个学生成绩计算页面。

二. 实验步骤(及实验数据)

1. css 部分
* {
	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: 800px;
	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: 1200px;
	margin: 0px auto;
	border-collapse:collapse;
}
.studentList thead tr td {
	background-color: #6495ED;
}
.studentList thead tr td>a{
	font-size: 20px;
	text-decoration: none;
	color: #333;
}
.lastTr{
	font-size: 20px;
	font-weight: bold;
}
.studentList td {
	height: 60px;
	text-align: center;
	border: 1px solid #ddd;
	font-size: 20px;
}
.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: 20px;
}
.searchInfo>input {
	height: 28px;
	border-radius: 4px;
	padding-left: 6px;
}
.searchInfo>button {
	height: 34px;
	font-size: 20px;
	line-height: 20px;
	display: inline-block;
}
2. HTML部分
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ExperimentTwo</title>
		<link rel="stylesheet" href="css/ExperimentTwo.css">
	</head>
	<body>
		<div id="app">
			<h3>学生成绩录入系统</h3>
			<div class="inputInfo">
				<label for="studentName">姓名:</label>
				<input type="text" id="studentName" placeholder="请输入学生的姓名......" v-model="newStudent.stuName" />
			</div>
			<div class="inputInfo">
				<label for="studentID">学号:</label>
				<input type="text" id="studentID" placeholder="请输入学生的学号......" v-model="newStudent.stuID" />
			</div>
			<div class="inputInfo">
				<label for="studentScore_One">课程一(HTML5应用开发):</label>
				<input type="number" id="studentScore_One" placeholder="请输入课程成绩......" v-model.number="newStudent.scoreOne" />
			</div>
			<div class="inputInfo">
				<label for="studentScore_Two">课程二(JavaScript程序设计):</label>
				<input type="number" id="studentScore_Two" placeholder="请输入课程成绩......" v-model.number="newStudent.scoreTwo" />
			</div>
			<div class="inputInfo">
				<label for="studentScore_Three">课程三(前端框架(Vue.js)应用开发):</label>
				<input type="number" id="studentScore_Three" placeholder="请输入课程成绩......" v-model.number="newStudent.scoreThree" />
			</div>
			<button class="btnStyle createBtn" @click="createNewStudent()">添加学生成绩</button>
			
			<hr />
			<!-- 学生信息列表 -->
			<h3>学生成绩列表</h3>
			<div class="optionBtn">
				<button class="btnStyle averageBtn" @click="averageThree()">显示课程三的平均值</button>
				<button class="btnStyle averageBtn" @click="averageTotal()">显示个人课程平均分</button>
			</div>
			<table class="studentList">
				<thead>
					<tr>
						<td>姓名</td>
						<td>学号</td>
						<td>课程一<br />(HTML5应用开发)</td>
						<td>课程二<br />(JavaScript程序设计)</td>
						<td><a href="javascript:void(0)" @click="sortScoreThree()">课程三<br />(前端框架(Vue.js)应用开发)↑</a></td>
						<td>个人课程<br />总分</td>
						<td>个人课程<br />平均分</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(student,index) in students" :key="index">
						<td>{{student.stuName}}</td>
						<td>{{student.stuID}}</td>
						<td>{{student.scoreOne}}</td>
						<td>{{student.scoreTwo}}</td>
						<td>{{student.scoreThree}}</td>
						<td>{{scoreTotal(index)}}</td>
						<td>{{student.scoreAverage}}</td>
						<td>
							<button class="btnStyle deleteBtn" @click="deleteStudent(index)">删除</button>
						</td>
					</tr>
					<tr class="lastTr">
						<td>平均分</td>
						<td>/</td>
						<td></td>
						<td></td>
						<td>{{averageThreeCourse}}</td>
						<td>/</td>
						<td>/</td>
						<td>/</td>
					</tr>
				</tbody>
			</table>
			<div class="searchInfo">
				按姓名搜索:<input type="text" v-model="search" />
				<button class="btnStyle searchBtn" @click="filteredStudents()">搜索</button>
			</div>
		</div>
<!--		<script src="./js/v3.2.8/vue.global.prod.js"></script>		-->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
<!--		测试版			-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!--		JS部分			-->
		<script src="./js/ExperimentTwo.js"></script>
	</body>
</html>
3. JS部分(VUE3.0)
 var app=Vue.createApp({
    data(){
        return{
            isAverageThree:false,
            isScoreAverage:false,
            averageThreeCourse:0,
            infoScoreTotal:0,
            students:[{
                stuName:"张三",
                stuID:001,
                scoreOne:61,
                scoreTwo:66,
                scoreThree:79,
                scoreTotal:0,
                scoreAverage:0
            },
                {
                    stuName:"李四",
                    stuID:002,
                    scoreOne:86,
                    scoreTwo:77,
                    scoreThree:99,
                    scoreTotal:0,
                    scoreAverage:0
                },
                {
                    stuName:"王五",
                    stuID:003,
                    scoreOne:92,
                    scoreTwo:99,
                    scoreThree:89,
                    scoreTotal:0,
                    scoreAverage:0
                }
            ],
            newStudent:{
                stuName:"",
                stuID:0,
                scoreOne:0,
                scoreTwo:0,
                scoreThree:0,
            }
        }
    },
     // 计算属性
    computed:{
        // 计算课程三的平均分
        meAverageThreeCourse(){
            let total=0;
            for(let i=0;i<this.students.length;i++){
                total+=this.students[i].scoreThree;
            }
            return total/this.students.length;
        },
    },
     // 监听器
    methods:{
        // 添加学生信息
        createNewStudent(){
            // 判断输入信息是否有误
            if (this.newStudent.stuName === ''){
                alert("学生姓名不能为空!");
                return;
                // ==用于判断两个值是否相等 !==用于判断两个值是否不相等
            }else if (this.newStudent.stuID === '' || this.newStudent.stuID == 0){
                alert("学生学号格式不正确!");
                return;
            }else if(this.newStudent.scoreOne<0 || this.newStudent.scoreOne>100){
                alert("课程一(HTML5应用开发)成绩输入有误,成绩区间[0-100]!");
                return;
            }else if(this.newStudent.scoreTwo<0 || this.newStudent.scoreTwo>100){
                alert("课程二(JavaScript程序设计)成绩输入有误,成绩区间[0-100]!");
                return;
            }else if(this.newStudent.scoreThree<0 || this.newStudent.scoreThree>100){
                alert("课程三(前端框架(Vue.js)应用开发)成绩输入有误,成绩区间[0-100]!");
                return;
            } else {
                // 如果无误添加学生信息
                this.students.push(this.newStudent);
                this.newStudent={
                    stuName:'',
                    stuID:0,
                    scoreOne:0,
                    scoreTwo:0,
                    scoreThree:0,
                }
            }
        },
        // 删除学生信息
        deleteStudent(index){
            this.students.splice(index,1);
        },
        // 课程三成绩排序 从高到低
        sortScoreThree(){
            this.students.sort(function (a,b) {
                return b.scoreThree-a.scoreThree;
            })
        },
        // 点击事件显示或隐藏课程三成绩
        averageThree() {
            this.isAverageThree = !this.isAverageThree;
            if (this.isAverageThree) {
                this.averageThreeCourse = this.meAverageThreeCourse;
            }else {
                this.averageThreeCourse = 0;
            }
        },
        // 点击事件像是或隐藏学生个人课程平均分 不保留小数
        averageTotal() {
            this.isScoreAverage = !this.isScoreAverage;
            if (this.isScoreAverage) {
                for(let i=0;i<this.students.length;i++){
                    this.students[i].scoreAverage=(this.students[i].scoreOne+this.students[i].scoreTwo+this.students[i].scoreThree)/3;
                    // .toFixed(0) 保留小数点后0位 不保留小数 保留整数
                    this.students[i].scoreAverage=this.students[i].scoreAverage.toFixed(0);
                }
            }else {
                for(let i=0;i<this.students.length;i++){
                    this.students[i].scoreAverage=0;
                }
            }
        },
        // 通过索引计算学生个人课程总分
        scoreTotal(index){
            return this.students[index].scoreOne+this.students[index].scoreTwo+this.students[index].scoreThree;
        },
        // 搜索学生信息 通过在输入框输入学生姓名搜索学生信息并显示
        filteredStudents() {
            // 判断是否输入了学生姓名
            if (this.search === '') {
                alert('请输入学生姓名!');
                return;
            } else {
                // 遍历students数组,查找是否有符合条件的学生
                for (let i = 0; i < this.students.length; i++) {
                    // 如果有符合条件的学生,则将符合条件的学生信息存储到一个新数组中
                    if (this.students[i].stuName === this.search) {
                        // 将符合条件的学生信息存储到一个新数组中
                        let stuSearch = [];
                        stuSearch.push(this.students[i]);
                        // 将符合条件的学生信息替换students数组
                        this.students = stuSearch;
                        return;
                    }
                }
                // 如果遍历完students数组后,没有符合条件的学生,则提示没有该学生
                alert('没有该学生!');
            }
        }
    },
}).mount("#app");

效果展示

image-20230420213555415

注:“有志者,事竟成!!” 有问题欢迎讨论!😉😉😉

详情见:学生成绩计算页面(Vue3.0) | Ming OR Fang KINESPHERE

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14357.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!