超级会员免费看
该博客详细介绍了如何在Vue.js中使用计算属性来处理成绩管理，包括不及格成绩的高亮显示、删除、添加功能以及统计总分和平均分。示例代码展示了v-if/v-else、v-bind:class、filter、v-model、v-for、reduce等核心指令和方法的应用。
使用成绩需求来实现
详细的代码示例（主要练习 Vue 简单的计算属性）
需求功能技术点
- 渲染功能： 不及格高亮、使用v-if v-else结局盒子互斥，使用v-bind:class解决高亮。
- 删除功能：点击传递id ，通过filter过滤器过滤然后覆盖原数组，使用指令修饰符。prevent阻止默认行为。
- 添加功能：v-model双向绑定，使用指令修饰符 （trim， number）修饰功能。在使用unshift修改数组，v-for会根据数组自动更新视图。
- 统计总分，求平均分：使用reduce求和（需要在computed配置项中使用计算属性函数），将计算逻辑返回的结果通过return暴露出来，然后使用差值表达式 通过 属性的方式进行渲染即可。切记计算属性和函数方法长的一样都是函数，但是，使用计算属性必须写属性。{ { 计算属性名 }}，后面不要小括号。
<!DOCTYPE 
订阅专栏 解锁全文
1077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
