diff --git a/02-basics-2/30-calculator/CalculatorApp.js b/02-basics-2/30-calculator/CalculatorApp.js index 381b03f..f06afce 100644 --- a/02-basics-2/30-calculator/CalculatorApp.js +++ b/02-basics-2/30-calculator/CalculatorApp.js @@ -1,26 +1,51 @@ -import { defineComponent } from 'vue' +import { defineComponent, ref, watch } from 'vue' export default defineComponent({ name: 'CalculatorApp', - setup() {}, + setup() { + const firstNumber = ref(0); + const secondNumber = ref(0); + const picked = ref('sum'); + const result = ref(0); + + watch([firstNumber, secondNumber, picked], () => { + switch(picked.value) { + case 'sum': + return result.value = firstNumber.value + secondNumber.value + case 'subtract': + return result.value = firstNumber.value - secondNumber.value + case 'multiply': + return result.value = firstNumber.value * secondNumber.value + case 'divide': + return result.value = firstNumber.value / secondNumber.value + } + }); + + return { + firstNumber, + secondNumber, + picked, + result, + } + }, template: `
- +
- - - - + + + +
- +
=
- 0 + {{ result }}
`, })