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

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

Vue計(jì)算屬性實(shí)現(xiàn)成績(jī)單

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

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

代碼如下:

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>成績(jī)單統(tǒng)計(jì)</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>分?jǐn)?shù)</th> </tr> <tr> <td>語(yǔ)文</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>英語(yǔ)</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計(jì)算屬性實(shí)現(xiàn)成績(jī)單

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

Vue計(jì)算屬性的傳參

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

<!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>

注意:

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

計(jì)算屬性通常用來(lái)獲取數(shù)據(jù)(根據(jù)data的變化而變化),所以其默認(rèn)只有g(shù)etter,但需要時(shí),Vue.js也提供setter功能。set方法與get方法先后順序無(wú)關(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>計(jì)算屬性與方法的區(qū)別

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

計(jì)算屬性的特點(diǎn)如下:

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

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

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 湖南自考_湖南自学考试| [官网]叛逆孩子管教_戒网瘾学校_全封闭问题青少年素质教育_新起点青少年特训学校 | 减速机三参数组合探头|TSM803|壁挂式氧化锆分析仪探头-安徽鹏宸电气有限公司 | 烘干设备-热泵烘干机_广东雄贵能源设备有限公司 | 亚克力制品定制,上海嘉定有机玻璃加工制作生产厂家—官网 | 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | pH污水传感器电极,溶解氧电极传感器-上海科蓝仪表科技有限公司 | 北京翻译公司_同传翻译_字幕翻译_合同翻译_英语陪同翻译_影视翻译_翻译盖章-译铭信息 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 | 筛分机|振动筛分机|气流筛分机|筛分机厂家-新乡市大汉振动机械有限公司 | 量子管通环-自清洗过滤器-全自动反冲洗过滤器-北京罗伦过滤技术集团有限公司 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | 卫浴散热器,卫浴暖气片,卫生间背篓暖气片,华圣格浴室暖气片 | 免费分销系统 — 分销商城系统_分销小程序开发 -【微商来】 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | 深圳公司注册-工商注册代理-注册公司流程和费用_护航财税 | 蒸汽吸附分析仪-进口水分活度仪|康宝百科| 智能型高压核相仪-自动开口闪点测试仪-QJ41A电雷管测试仪|上海妙定 | NBA直播_NBA直播免费观看直播在线_NBA直播免费高清无插件在线观看-24直播网 | 南溪在线-南溪招聘找工作、找房子、找对象,南溪综合生活信息门户! | 搪瓷搅拌器,搪玻璃搅拌器,搪玻璃冷凝器_厂家-淄博越宏化工设备 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 手持气象站_便携式气象站_农业气象站_负氧离子监测站-山东万象环境 | 电液推杆生产厂家|电动推杆|液压推杆-扬州唯升机械有限公司 | 陕西安闸机-伸缩门-车牌识别-广告道闸——捷申达门业科技 | 魔方网-培训咨询服务平台| TPU薄膜_TPU薄膜生产厂家_TPU热熔胶膜厂家定制_鑫亘环保科技(深圳)有限公司 | 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 据信,上课带着跳 D 体验-别样的课堂刺激感受引发网友热议 | 房屋质量检测-厂房抗震鉴定-玻璃幕墙检测-房屋安全鉴定机构 | 泰州物流公司_泰州货运公司_泰州物流专线-东鑫物流公司 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 智成电子深圳tdk一级代理-提供TDK电容电感贴片蜂鸣器磁芯lambda电源代理经销,TDK代理商有哪些TDK一级代理商排名查询。-深圳tdk一级代理 | 油冷式_微型_TDY电动滚筒_外装_外置式电动滚筒厂家-淄博秉泓机械有限公司 | 游泳池设计|设备|配件|药品|吸污机-东莞市太平洋康体设施有限公司 | 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | 二手电脑回收_二手打印机回收_二手复印机回_硒鼓墨盒回收-广州益美二手电脑回收公司 | 3D全息投影_地面互动投影_360度立体投影_水幕灯光秀 | 广东银虎 蜂窝块状沸石分子筛-吸附脱硫分子筛-萍乡市捷龙环保科技有限公司 | 防爆电机生产厂家,YBK3电动机,YBX3系列防爆电机,YBX4节防爆电机--河南省南洋防爆电机有限公司 |