电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue計算屬性實現(xiàn)成績單

瀏覽:3日期:2023-02-16 14:54:17

本文實例為大家分享了Vue計算屬性實現(xiàn)成績單,供大家參考,具體內(nèi)容如下

代碼如下:

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>成績單統(tǒng)計</title> <script src='http://www.hdgsjgj.cn/bcjs/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>學(xué)科</th> <th>分數(shù)</th> </tr> <tr> <td>語文</td> <td> <input type='text' name='' id='' value='' v-model.number='Chinese' /> </td> </tr> <tr> <td>數(shù)學(xué)</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計算屬性實現(xiàn)成績單

當(dāng)我改變語文,數(shù)學(xué)·,英語的成績,總分和平均分會隨著實時變化,這就是Vue計算屬性的特點。

Vue計算屬性的傳參

計算屬性本質(zhì)是一個方法,但是通常被當(dāng)作一個屬性來使用,一般不加()。但在實際開發(fā)中,如果需要給計算屬性中的方法傳參,就需要使用閉包傳參的方法。

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>Evaluate</title> <script src='http://www.hdgsjgj.cn/bcjs/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>

注意:

計算屬性本身不能像方法一樣在括號里填寫參數(shù)來達到傳參的目的,需要在該方法體里寫真正的方法,來接受參數(shù)。 同理,計算屬性方法體參數(shù)可省略,即本例子中add(){}和add(index){}均可計算屬性的getter和setter

計算屬性通常用來獲取數(shù)據(jù)(根據(jù)data的變化而變化),所以其默認只有g(shù)etter,但需要時,Vue.js也提供setter功能。set方法與get方法先后順序無關(guān),并且set方法接受的參數(shù)為get方法的返回值。

<!DOCTYPE html><html> <head> <meta charset='utf-8' /> <title>Computed</title> <script src='http://www.hdgsjgj.cn/bcjs/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>計算屬性與方法的區(qū)別

使用計算屬性的這種方法可以確保代碼只在必要的時刻執(zhí)行,適合處理一些潛在資源密集型工作。但是,如果項目不具有緩存功能,則要使用methods,要根據(jù)實際情況而定。

計算屬性的特點如下:

①當(dāng)計算屬性的依賴發(fā)生變化時,會立即進行計算,并對計算結(jié)果進行自動更新。②計算屬性的求值結(jié)果會被緩存起來,以方便下次直接使用。③計算屬性適用于執(zhí)行更加復(fù)雜的表達式,這些表達式往往太長或需要頻繁的重復(fù)使用,所以不能在模板中直接使用。④計算屬性是data對象的一個擴展和增強版本。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 贵州成人高考网_贵州成考网| 集装袋吨袋生产厂家-噸袋廠傢-塑料编织袋-纸塑复合袋-二手吨袋-太空袋-曹县建烨包装 | 密度电子天平-内校-外校电子天平-沈阳龙腾电子有限公司 | 工业制氮机_psa制氮机厂家-宏骁智能装备科技江苏有限公司 | 南京兰江泵业有限公司-水解酸化池潜水搅拌机-絮凝反应池搅拌机-好氧区潜水推进器 | 连续密炼机_双转子连续密炼机_连续式密炼机-南京永睿机械制造有限公司 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 安平县鑫川金属丝网制品有限公司,防风抑尘网,单峰防风抑尘,不锈钢防风抑尘网,铝板防风抑尘网,镀铝锌防风抑尘网 | CCE素质教育博览会 | CCE素博会 | 教育展 | 美育展 | 科教展 | 素质教育展 | 西安标准厂房_陕西工业厂房_西咸新区独栋厂房_长信科技产业园官方网站 | 防爆大气采样器-防爆粉尘采样器-金属粉尘及其化合物采样器-首页|盐城银河科技有限公司 | 精密五金加工厂-CNC数控车床加工_冲压件|蜗杆|螺杆加工「新锦泰」 | 高博医疗集团上海阿特蒙医院| 潍坊大集网-潍坊信息港-潍坊信息网 | 美侍宠物-专注宠物狗及宠物猫训练|喂养|医疗|繁育|品种|价格 | 奥因-光触媒除甲醛公司-除甲醛加盟公司十大品牌 | 除尘布袋_液体过滤袋_针刺毡滤料-杭州辉龙过滤技术有限公司 | 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | 工业铝型材-铝合金电机壳-铝排-气动执行器-山东永恒能源集团有限公司 | 除甲醛公司-甲醛检测-广西雅居环境科技有限公司 | 南京欧陆电气股份有限公司-风力发电机官网 | 旗杆生产厂家_不锈钢锥形旗杆价格_铝合金电动旗杆-上海锥升金属科技有限公司 | 钢格板_钢格栅_格栅板_钢格栅板 - 安平县鑫拓钢格栅板厂家 | 气动球阀_衬氟蝶阀_调节阀_电动截止阀_上海沃托阀门有限公司 | 日本细胞免疫疗法_肿瘤免疫治疗_NK细胞疗法 - 免疫密码 | 直流大电流电源,燃料电池检漏设备-上海政飞 | 无菌检查集菌仪,微生物限度仪器-苏州长留仪器百科 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 洛阳永磁工业大吊扇研发生产-工厂通风降温解决方案提供商-中实洛阳环境科技有限公司 | 钢结构厂房造价_钢结构厂房预算_轻钢结构厂房_山东三维钢结构公司 | VI设计-LOGO设计公司-品牌设计公司-包装设计公司-导视设计-杭州易象设计 | 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | 农产品溯源系统_农产品质量安全追溯系统_溯源系统 | 北京律师事务所_房屋拆迁律师_24小时免费法律咨询_云合专业律师网 | 污泥烘干机-低温干化机-工业污泥烘干设备厂家-焦作市真节能环保设备科技有限公司 | 硫化罐-胶管硫化罐-山东鑫泰鑫智能装备有限公司 | 隔离变压器-伺服变压器--输入输出电抗器-深圳市德而沃电气有限公司 | 昆山PCB加工_SMT贴片_PCB抄板_线路板焊接加工-昆山腾宸电子科技有限公司 | 免费网站网址收录网_海企优网站推荐平台 | 耐酸泵,耐酸泵厂家-淄博华舜耐腐蚀真空泵 |