上一章我們已經(jīng)了解了什么是計(jì)算屬性，下面我們需要利用計(jì)算屬性實(shí)現(xiàn)一些更復(fù)雜的功能。
如圖，當(dāng)用戶輸入身高和體重時(shí)，我們需要自動(dòng)計(jì)算出來(lái)用戶的bmi。并且當(dāng)bmi的值大于30小于40或大于40時(shí)，右側(cè)的按鈕能夠同步高亮。如圖所示：
首先通過(guò)weight和height綁定用戶輸入的身高和體重，接著定義一個(gè)計(jì)算屬性bmi，其依賴于用戶所輸入的身高和體重，經(jīng)過(guò)運(yùn)算返回一個(gè)帶一位小數(shù)的bmi值。
接著渲染到頁(yè)面上，可以發(fā)現(xiàn)，當(dāng)身高和體重的任意一個(gè)值發(fā)生變化，bmi都會(huì)同步改變并計(jì)算出此人的bmi值。
然后我們需要通過(guò)bmi的值判斷按鈕是否高亮，當(dāng)在方法中需要計(jì)算屬性的值時(shí)可以直接通過(guò)this.計(jì)算屬性得到。注意：this.fire()方法類似于vue中的this.emit()方法。
當(dāng)bmi值大于40或位于30-40之間時(shí)，將其傳出，并在父組件中控制按鈕的高亮即可。
上一篇： vue功能介紹之計(jì)算屬性
下一篇： Element自定義折疊折疊面板
