經過前面幾天介紹了 Vue 部分的方法，這章就利用前面所學的來做一個簡單的實作吧～
我想大家應該都了解 BMI 這個數值是怎麼算的吧？
BMI 的公式就是 體重／(身高)^2^，當然身高是要先換算成公尺。
好的那已經確定好要計算的公式就來撰寫一個 BMI 產生器吧～
首先我們先產生 2 個輸入欄要讓使用者輸入身高及體重：
<body>
<div id="app">
身高：<input type="number" placeholder="請輸入您的身高"><br>
體重：<input type="number" placeholder="請輸入您的體重"><br>
</div>
</body>
接下來我們在 data 裡宣告 height 及 weight 來跟輸入欄做綁定：
前面有提到輸入欄的部份我們需要做雙向綁定，這樣才夠即時更改 data 裡面的值，所以我們再輸入欄裡面使用 v-model 跟 data 做綁定。
<body>
<div id="app">
身高：<input type="number" v-model="height" placeholder="請輸入您的身高"><br>
體重：<input type="number" v-model="weight" placeholder="請輸入您的體重"><br>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
weight: null,
height: null
}
})
</script>
再來就是計算 BMI 的部分啦～
我們就用前面提到的 computed 來執行計算吧！！
<script>
const vm = new Vue({
el: '#app',
data: {
weight: null,
height: null
},
computed: {
bmi() {
const weight = Number(this.weight);
const height = Number(this.height) / 100;
const bmi = weight / (height * height);
return bmi || 0;
}
}
})
</script>
可能有人會有疑問為什麼最後面 bmi 是 return bmi || 0
因為如果一開始沒有輸入計算值的話，他計算會是 0 / 0，在 0 / 0 計算之後得到的是 NAN。
所以就要讓他初始顯示為 0，最後結果就會是這樣囉：
<div id="app">
身高：<input type="number" v-model="height" placeholder="請輸入您的身高"><br>
體重：<input type="number" v-model="weight" placeholder="請輸入您的體重"><br>
BMI:{{bmi}}
</div>
iThome鐵人賽
看影片追技術