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