Vue计算属性实现成绩单
本文实例为大家分享了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实现可增删查改的成绩单
前端变化层出不穷,去年NG火一片,今年react,vue火一片,ng硬着头皮看了几套教程,总被其中的概念绕晕,react是faceback出品,正在不断学习中,同时抽时间了解了vue,查看了vue官方文挡,看完格外入眼,总觉得要拿来试一试手. 正好周未,做一个小成绩单玩玩,以前有用avalon也做过一个类似的,从过程来看,二个框架都在避免开发者频繁操作dom,脱离dom苦海,安心处理数据业务逻辑,从二个示例来看,可以成倍的提高开发效率. vue示例代码如下: <!DOCTYPE html> &
-
Vue计算属性实现成绩单
本文实例为大家分享了Vue计算属性实现成绩单,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>成绩单统计</title> <script src="js/vue.js" type="text/javascript" charset="utf-8&quo
-
Vue计算属性的学习笔记
本文为大家分享了Vue计算属性的学习笔记,供大家参考,具体内容如下 ①模板内的表达式实际上只用于简单的运算,对于复杂逻辑,使用计算机属性. ②基础例子: <div id = "example"> <p>Original message:"{{message}}"</p> <p>Computed reversed message:"{{reversedMessage}}"</p> <
-
vue计算属性时v-for处理数组时遇到的一个bug问题
问题 bug: You may have an infinite update loop in a component render function 无限循环 1.需要处理的数组(在 ** ssq **里): bonus_code: ['01', '19', '25', '26', '27', '33', '10'] 2.计算属性 computed: ssqRed: function() { return this.ssq.bonus_code.splice(0, 6) }, ssqBlue:
-
关闭Vue计算属性自带的缓存功能方法
使用Vue的小伙伴都会知道,vue的计算属性.这个是这个样子解释的,当某些依赖值发生变化的时候,其自身的值也会发生变化,与之先关的DOM也会发生变化,通常呢,这个计算属性里面都会有两个方法:get和set可以使用. 这里我只分析一下,如何关闭计算属性的缓存,获取最新数据,如下实例: HTML代码 <div id="mess"> <div>{{exapm}}</div> </div> JS代码: var vue2 = new Vue({ e
-
vue计算属性及使用详解
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调
-
vue计算属性computed的使用方法示例
本文实例讲述了vue计算属性computed的使用方法.分享给大家供大家参考,具体如下: computed:{ b:function(){ //默认调用get return 值 } } computed:{ b:{ get: set: } } * computed里面可以放置一些业务逻辑代码,一定记得return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&
-
vue计算属性get和set用法示例
本文实例讲述了vue计算属性get和set用法.分享给大家供大家参考,具体如下: 计算属性是什么:vue文档里是这么说的,模板中绑定太多的逻辑会让模板过重且难以维护. 换句话说,就是可以自己设置值(b值),这个值和data下定义的值(a值)存在某些关系,b的值是基于a的值,通过某些逻辑产生出来的值,b值可以直接拿到template里去用.当a的值发生变化的时候,b的值会跟着变化.就是计算属性中的默认值get.那set又是什么鬼? b的值是基于a的变化而变化的,那么直接修改b的值的时候,会怎么样?
-
vue计算属性和监听器实例解析
基本实例 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello'
-
vue计算属性无法监听到数组内部变化的解决方案
vue的计算属性 计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data. 首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) 这样我们在模版里这样
-
vue 计算属性和侦听器的使用小结
1. 计算属性和侦听器 1.1 计算属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"