怎么用Vue计算属性实现成绩单

　　介绍

这篇文章主要介绍”怎么用Vue计算属性实现成绩单”,在日常操作中,相信很多人在怎么用Vue计算属性实现成绩单问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“怎么用Vue计算属性实现成绩单”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

本文实例为大家分享了Vue计算属性实现成绩单,供大家参考,具体内容如下

代码如下:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　,& lt; head> 　　& lt;才能meta  charset=皍tf-8"比; 　　& lt;才能title>成绩单统计& lt;/title> 　　& lt;才能script  src=癹s/vue.js",类型=拔谋?javascript", charset=皍tf-8"祝辞& lt;/script> 　　& lt;才能style 类型=拔谋?css"比; 　　,,.gridtable { 　　,,,字体类型:verdana,, arial,,无衬线; 　　,,,字体大小:11 px; 　　,,,颜色:# 333333; 　　,,,边框宽度:,1 px; 　　,,,边框颜色:# 666666; 　　,,,border-collapse:,崩溃; 　　,,} 　　,,.gridtable  th { 　　,,,边框宽度:,1 px; 　　,,,填充:8 px; 　　,,,边框样式:固体; 　　,,,边框颜色:# 666666; 　　background - color,,,,, # dedede; 　　,,} 　　道明{,,.gridtable  　　,,,边框宽度:,1 px; 　　,,,填充:8 px; 　　,,,边框样式:固体; 　　,,,边框颜色:# 666666; 　　background - color,,,,, # ffffff; 　　,,} 　　& lt;才能/style> 　　,& lt;/head> 　　,& lt; body> 　　,, 　　& lt;才能div  id=癮pp"比; 　　,,& lt; table 类=癵ridtable"比; 　　,,,& lt; tr> 　　,,,,& lt; th>学科& lt;/th> 　　,,,,& lt; th>分数& lt;/th> 　　,,,& lt;/tr> 　　,,,& lt; tr> 　　,,,,& lt; td>语文& lt;/td> 　　,,,,& lt; td> 　　,,,,,& lt; input 类型=皌ext", name=啊? id=啊? value=啊? v-model.number=癈hinese",/比; 　　,,,,& lt;/td> 　　,,,& lt;/tr> 　　,,,& lt; tr> 　　,,,,& lt; td>数学& lt;/td> 　　,,,,& lt; td> 　　,,,,,& lt; input 类型=皌ext", name=啊? id=啊? value=啊? v-model.number=癕ath",/比; 　　,,,,& lt;/td> 　　,,,& lt;/tr> 　　,,,& lt; tr> 　　,,,,& lt; td>英语& lt;/td> 　　,,,,& lt; td> 　　,,,,,& lt; input 类型=皌ext", name=啊? id=啊? value=啊? v-model.number=癊nglish",/比; 　　,,,,& lt;/td> 　　,,,& lt;/tr> 　　,,,& lt; tr> 　　,,,,& lt; td>总分& lt;/td> 　　,,,,& lt; td> 　　,,,,,& lt; input 类型=皌ext", name=啊? id=啊? value=啊? v-model.number=皊um",/比; 　　,,,,& lt;/td> 　　,,,& lt;/tr> 　　,,,& lt; tr> 　　,,,,& lt; td>平均分& lt;/td> 　　,,,,& lt; td> 　　,,,,,& lt; input 类型=皌ext", name=啊? id=啊? value=啊? v-model.number=癮verage",/比; 　　,,,,& lt;/td> 　　,,,& lt;/tr> 　　,,& lt;/table> 　　& lt;才能/div> 　　,, 　　& lt;才能script> 　　,,var  Vue ({vm=new  　　,,,埃尔:“# app" 　　,,,数据:{ 　　,,,,中国:100年, 　　,,,,数学:100年, 　　,,,,中文:60 　　,,,}, 　　,,,计算:{ 　　,,,,金额:函数(){ 　　,,,,,return  this.Chinese + this.Math + this.English; 　　,,,,}, 　　,,,,平均:函数(){ 　　,,,,,return  Math.round (this.sum/3); 　　,,,,} 　　,,,}, 　　,,,, 　　,,}) 　　& lt;才能/script> 　　,& lt;/body> 　　& lt;/html>

怎么用Vue计算属性实现成绩单

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

Vue计算属性的传参

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

& lt; ! DOCTYPE  html> 　　& lt; html> 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么用Vue计算属性实现成绩单