Vue计算属性实现成绩单

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>成绩单统计</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.gridtable{font-family:verdana, arial, sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color:#666666;border-collapse: collapse;}.gridtable th{border-width: 1px;padding:8px;border-style:solid;border-color:#666666;background-color: #dedede;}.gridtable td{border-width: 1px;padding:8px;border-style:solid;border-color:#666666;background-color: #ffffff;}</style></head><body><div id="app"><table class="gridtable"><tr><th>学科</th><th>分数</th></tr><tr><td>语文</td><td><input type="text" name="" id="" value="" v-model.number="Chinese" /></td></tr><tr><td>数学</td><td><input type="text" name="" id="" value="" v-model.number="Math" /></td></tr><tr><td>英语</td><td><input type="text" name="" id="" value="" v-model.number="English" /></td></tr><tr><td>总分</td><td><input type="text" name="" id="" value="" v-model.number="sum" /></td></tr><tr><td>平均分</td><td><input type="text" name="" id="" value="" v-model.number="average" /></td></tr></table></div><script>var vm=new Vue({el:"#app",data:{Chinese:100,Math:100,English:60},computed:{sum:function(){return this.Chinese+this.Math+this.English;},average:function(){return Math.round(this.sum/3);}},})</script></body>
</html>

当我改变语文，数学·，英语的成绩，总分和平均分会随着实时变化，这就是Vue计算属性的特点。

Vue计算属性的传参

计算属性本质是一个方法，但是通常被当作一个属性来使用，一般不加()。但在实际开发中，如果需要给计算属性中的方法传参，就需要使用闭包传参的方法。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Evaluate</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><div id="app">{{add(2)}}</div><script type="text/javascript">var vm =new Vue({el:"#app",data:{number:1},computed:{add(){return function(index){return this.number+index;}}}})</script></head><body></body>
</html>

注意：

计算属性本身不能像方法一样在括号里填写参数来达到传参的目的，需要在该方法体里写真正的方法，来接受参数。
同理，计算属性方法体参数可省略，即本例子中add(){}和add(index){}均可

计算属性的getter和setter

计算属性通常用来获取数据（根据data的变化而变化），所以其默认只有getter，但需要时，Vue.js也提供setter功能。set方法与get方法先后顺序无关，并且set方法接受的参数为get方法的返回值。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Computed</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">firstName:<input type="text" name="" id="" value="" v-model="first"/>lastName:<input type="text" name="" id="" value="" v-model="last"/><p>fullName:<input type="text" name="" id="" value="" v-model="fullName"/></p></div><script type="text/javascript">var vm=new Vue({el:"#app",data:{first:"Jack",last:"Jones"},computed:{fullName:{get:function(){return this.first+" "+this.last},set:function(parameter){var names=parameter.split(" ")this.first=names[0]this.last=names[names.length-1]}}}})</script></body>
</html>

计算属性与方法的区别

使用计算属性的这种方法可以确保代码只在必要的时刻执行，适合处理一些潜在资源密集型工作。但是，如果项目不具有缓存功能，则要使用methods，要根据实际情况而定。

计算属性的特点如下：
①当计算属性的依赖发生变化时，会立即进行计算，并对计算结果进行自动更新。
②计算属性的求值结果会被缓存起来，以方便下次直接使用。
③计算属性适用于执行更加复杂的表达式，这些表达式往往太长或需要频繁的重复使用，所以不能在模板中直接使用。
④计算属性是data对象的一个扩展和增强版本。

Vue计算属性实现成绩单，Vue计算属性相关推荐

vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
【vue系列-03】vue的计算属性，列表，监视属性及原理
vue的核心属性一,vue核心属性 1,计算属性 2,监视属性 3,样式绑定 3.1,class样式绑定 3.2,style样式绑定 4,条件渲染 5,列表渲染 5.1,遍历列表 5.2,key的作 ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
VUE学习一：初识VUE、指令、动态绑定、计算属性
文章目录导言一.01-初体验 1. ch01_helloworld.html 2. ==v-for指令==:ch02_vue列表展示_v-for.html 3. ==v-on指令==:ch03.1 ...
Vue项目中如何使用computed计算属性
文章目录 computed: 1.基本使用: 1.1 应用场景: 1.2 代码位置: 1.3 值: 2.复杂操作-结合data中数据: 3.计算属性写法演变: 3.1 计算属性的setter和gett ...
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性一.实例演示,v-if,v-for,v-model,v-bind,v-on 方法含义 v-bin ...
Vue中的（computed）计算属性和（watched）侦听属性以及（methods）方法
1. computed 计算属性可用于快速计算视图中显示的属性. 这些计算将被缓存,并且只在需要时更新. 他的方法不需要在data里面定义它们完全是同步的. <div class=" ...

Vue计算属性实现成绩单，Vue计算属性

Vue计算属性实现成绩单

Vue计算属性的传参

计算属性的getter和setter

计算属性与方法的区别

Vue计算属性实现成绩单，Vue计算属性相关推荐

最新文章

热门文章