5.请给按钮加上动画特效。点击之后,出现进度条,处理完成之后进度条消失。为了可以方便观测到进度条,可以在计算的函数当中增加一个等待2秒的操作。 6.在页面顶部增加导航“奖学金评选资格功能”和“奖学金评选资格功能说明”。具体地,点击“奖学金评选资格功能”显示相应功能,点击“奖学金评选资格功能说明”显示功能规则说明文字。 7.“Vue状态管理”的技术点,统计操作成功数和未操作成功数
时间: 2024-03-24 12:37:12 浏览: 92
好的,以下是经过修改的源码,实现了按钮动画特效、导航栏、状态管理等功能:
```
<template>
<div>
<nav>
<ul>
<li><a @click="showFunction">奖学金评选资格功能</a></li>
<li><a @click="showDescription">奖学金评选资格功能说明</a></li>
</ul>
</nav>
<div v-show="showFunctionContent">
<div>
<label for="hzd_name">姓名:</label>
<input type="text" id="hzd_name" v-model="hzd_name">
</div>
<div v-for="(score, index) in hzd_scores" :key="index">
<label :for="'hzd_score_'+index">课程{{index+1}}成绩:</label>
<input type="number" :id="'hzd_score_'+index" v-model.number="score">
</div>
<button @click="judgeQualification" :disabled="isCalculating">
<span v-if="isCalculating">计算中</span>
<span v-else>判断是否可以参评奖学金</span>
</button>
<div v-if="hzd_isQualified" class="success">恭喜,{{hzd_name}}可以参评奖学金!</div>
<div v-else-if="hzd_name && !hzd_isQualified" class="failure">抱歉,{{hzd_name}}不符合参评奖学金的条件!</div>
<div v-else class="info">请输入姓名和各科成绩,点击按钮判断是否可以参评奖学金。</div>
</div>
<div v-show="showDescriptionContent">
<p>奖学金评选条件为:成绩平均分90分以上;单科成绩不低于80分。</p>
</div>
<div class="progress-bar" v-show="isCalculating">
<div class="progress-bar-inner"></div>
</div>
<div class="statistics">
<p>操作成功数:{{successCount}}</p>
<p>未操作成功数:{{failureCount}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hzd_name: '',
hzd_scores: [0, 0, 0, 0, 0],
hzd_isQualified: false,
isCalculating: false,
showFunctionContent: true,
showDescriptionContent: false,
successCount: 0,
failureCount: 0
}
},
methods: {
judgeQualification() {
this.isCalculating = true;
setTimeout(() => {
const averageScore = this.hzd_scores.reduce((acc, cur) => acc + cur, 0) / this.hzd_scores.length;
const isQualified = averageScore >= 90 && this.hzd_scores.every(score => score >= 80);
this.hzd_isQualified = isQualified;
this.isCalculating = false;
if (isQualified) {
this.successCount++;
} else {
this.failureCount++;
}
}, 2000);
},
showFunction() {
this.showFunctionContent = true;
this.showDescriptionContent = false;
},
showDescription() {
this.showFunctionContent = false;
this.showDescriptionContent = true;
}
},
mounted() {
const input = document.querySelector('#hzd_name');
input.addEventListener('input', () => {
console.log('数据有变');
});
}
}
</script>
<style>
.success {
color: green;
}
.failure {
color: orange;
}
.info {
color: gray;
}
nav {
background-color: #333;
color: white;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #ddd;
color: black;
}
.progress-bar {
position: relative;
width: 100%;
height: 10px;
background-color: #ddd;
}
.progress-bar-inner {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: green;
}
.statistics {
margin-top: 20px;
}
</style>
```
以上源码中,通过在按钮点击事件中加入计时器,并在计时器中设置`isCalculating`的值为`true`,来触发进度条的显示。同时在计时器中模拟了一个2秒的等待操作,来延时按钮的处理过程,方便观察进度条的效果。
另外,在页面上方添加了一个导航栏,点击不同的导航链接可以切换不同的页面内容。同时使用了Vue状态管理的技术,通过在`judgeQualification`方法中判断是否符合参评奖学金的条件,并根据判断结果更新`successCount`和`failureCount`的值,来实现对操作成功数和未操作成功数的统计。
阅读全文