上一章我們已經了解了什么是計算屬性,下面我們需要利用計算屬性實現一些更復雜的功能。
如圖,當用戶輸入身高和體重時,我們需要自動計算出來用戶的bmi。并且當bmi的值大于30小于40或大于40時,右側的按鈕能夠同步高亮。如圖所示:

首先通過weight和height綁定用戶輸入的身高和體重,接著定義一個計算屬性bmi,其依賴于用戶所輸入的身高和體重,經過運算返回一個帶一位小數的bmi值。

接著渲染到頁面上,可以發現,當身高和體重的任意一個值發生變化,bmi都會同步改變并計算出此人的bmi值。
然后我們需要通過bmi的值判斷按鈕是否高亮,當在方法中需要計算屬性的值時可以直接通過this.計算屬性得到。注意:this.fire()方法類似于vue中的this.emit()方法。
當bmi值大于40或位于30-40之間時,將其傳出,并在父組件中控制按鈕的高亮即可。

上一篇: vue功能介紹之計算屬性
下一篇: Element自定義折疊折疊面板



