利用Vue的计算属性计算平均值总成绩

vue给我们提供了一个特别好的解决方案叫：计算属性
计算属性是vue实例中的一个配置选项：computed
通常里面都是一个个计算相关的函数，返回最后计算出来的值。
即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>成绩分析系统</title>
</head>
<script src="js/vuejs-2.5.16.js"></script>
<body><div><img src="js/java.jpg" style="height: 200px;width: 300px">
</div><div align="center"> <p>成绩分析系统</p></div><div id="app" align="center">
<table border="2px"><tr><td>数学</td><td><input type="text" v-model="math"></td></tr><tr><td>英语</td><td><input type="text" v-model="english"></td></tr><tr><td>语文</td><td><input type="text" v-model="chinese"></td></tr><tr><td>总分</td><td>{{sum}}</td></tr><tr><td>平均分</td><td>{{avaerage}}</td></tr>
</table>
</div>
</body>
<script>new Vue({el:"#app",data:{math:100,english:130,chinese:149,},computed:{sum:function () {return this.math+this.english+this.chinese ;},avaerage:function () {return Math.round(this.sum/3);}}});
</script>
</html>

利用Vue的计算属性计算平均值总成绩相关推荐

Vue02基础语法-插值+过滤器+计算属性+计算属性
14天阅读挑战赛努力是为了不平庸~ 目录 1.模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令:指令指的是带有"v-&qu ...
vue使用计算属性计算商品总价
vue计算商品总价使用 ---- 计算属性注命名规则: 属性名称,方法名称,变量名称尽量使用小驼峰命名法 computed:{totalPrice() {let totalPrice = 0fo ...
计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的；方法不存在缓存||侦听器
计算属性 1. 为何需要计算属性? 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 <!DOCTYPE html> <html lang=& ...
vue修改计算属性的值_Vue语法高级之计算属性和侦听器
计算属性和侦听器都可以监听到data区数据的变化,当数据变化时可以触发方法的调用,从而在方法内部可以进行相应的逻辑处理. 计算属性的语法格式是:computed: {} 侦听器的语法格式是:watch ...
你知道，什么时候用Vue计算属性吗？
摘要:当我们处理复杂逻辑时,都应该使用计算属性. 本文分享自华为云社区<深入理解计算属性,知道什么时候该用Vue计算属性吗?>,作者: 前端老实人 . 计算属性有些时候,我们在模板中放入 ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
教你什么时候用Vue计算属性！！！
导读在一些时候,我们会在模板中一些数据.会处理过多的逻辑.这个时候就非常的不好看,也难以维护.比如像下面的代码: <div id="app">{{ message.s ...
前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框.密码框.多行文本框单选多选勾 ...

利用Vue的计算属性计算平均值总成绩

利用Vue的计算属性计算平均值总成绩相关推荐

最新文章

热门文章