---
# System prepended metadata

title: Vue.js練習
tags: [vue.js]

---

# 實作計算機
教學參考：https://ithelp.ithome.com.tw/articles/10239783
範例：https://codepen.io/FCEEE987/pen/ZEVBare
實作：https://codepen.io/nojdeluj-the-looper/pen/ExGNOMQ
![](https://hackmd.io/_uploads/HJbD-nI0h.png=300x)


## 功能需求
* 點擊每個數字時，要顯示在上方的input box -> **儲存顯示數字的變數**
* 點擊每個運算子時，要紀錄點了哪個運算子 -> **儲存運算子的變數**
* 點過運算子後，再點擊數字需要清空input box，並顯示新的數字 -> **儲存上一個數字的變數** 和 **儲存上一次是否是點operator**
* 點每個運算子時，若之前點過運算子但還沒點過等號，需相將上一個數字和目前的數字做運算。
* 點擊等號時，要計算目前數字和上一個數字的運算結果。
* 點過等號後，按新的數字需要清空之前的數字 -> **儲存是否點過等號的變數**
* 點等號時，若運算只有目前的數字，則使用它和它自己作運算，例如：1+=會變成1+1=2
* 點擊C時要清空input box和之前的計算
* 小數點：x.等於x

:::warning
:warning: codepen除錯很不方便！注意使用vue實體的data值記得要用`this`喔！別忘了！
:::