vue实现奖学金评选资格判断:评奖学金对成绩有较高要求,请实现:学生输入姓名和各科成绩,点击按钮之后判断是否可以参评奖学金。假设课程数量为5门设置5个div。奖学金评选条件为:成绩平均分90分以上;单科成绩不低于80分。7.使用“Vue状态管理”的技术点,统计操作成功数和未操作成功数。 源码中的参数变量,以及方法名称,需要增加姓名首字母小写和下滑杠作为特殊标记,为:“hzd_”
时间: 2024-03-25 13:41:11 浏览: 58
好的,以下是实现这个功能的Vue代码。首先是HTML部分:
```html
<div id="app">
<div>
<label>姓名:</label>
<input v-model="hzd_name" />
</div>
<div v-for="(score, index) in hzd_scores" :key="index">
<label>课程{{ index + 1 }}:</label>
<input v-model.number="score" />
</div>
<button @click="hzd_checkQualification">判断是否可以参评奖学金</button>
<div v-if="hzd_isQualified">
恭喜,您可以参评奖学金!
</div>
<div v-else>
抱歉,您不符合参评奖学金的条件。
</div>
<div>
操作成功数:{{ hzd_successCount }},未操作成功数:{{ hzd_failCount }}
</div>
</div>
```
其中,`hzd_name`是绑定输入框的学生姓名,`hzd_scores`是一个数组,用于存储各科成绩,`hzd_isQualified`表示是否符合参评奖学金的条件,`hzd_successCount`和`hzd_failCount`分别表示操作成功数和未操作成功数。
接下来是Vue实例的JavaScript代码:
```javascript
new Vue({
el: '#app',
data: {
hzd_name: '',
hzd_scores: [0, 0, 0, 0, 0],
hzd_isQualified: false,
hzd_successCount: 0,
hzd_failCount: 0
},
methods: {
hzd_checkQualification() {
if (!this.hzd_name) {
this.hzd_failCount++;
alert('请输入姓名!');
return;
}
let totalScore = 0;
let isQualified = true;
for (let i = 0; i < this.hzd_scores.length; i++) {
totalScore += this.hzd_scores[i];
if (this.hzd_scores[i] < 80) {
isQualified = false;
}
}
if (totalScore / this.hzd_scores.length < 90 || !isQualified) {
this.hzd_isQualified = false;
} else {
this.hzd_isQualified = true;
}
this.hzd_successCount++;
}
}
});
```
其中,`hzd_checkQualification`是判断是否符合参评奖学金的函数。首先判断是否输入了学生姓名,如果没有就提示并增加未操作成功数。然后计算总成绩和单科成绩是否符合条件,如果符合则将`hzd_isQualified`设为`true`,否则设为`false`。最后增加操作成功数。
这里使用了Vue的状态管理技术,通过绑定数据来统计操作成功数和未操作成功数。
阅读全文