Vue3 계산기 만들기 (Nuxt)

계산기

 

---

• ref
• v-model
• computed()

<template>
  <div class="divClass">
    <input v-model="a" type="number" />
    <select v-model="operator">
      <option value="plus">+</option>
      <option value="minus">-</option>
      <option value="mul">*</option>
      <option value="div">/</option>
    </select>
    <input v-model="b" type="number" />
    <h2>{{ calculate }}</h2>
  </div>
</template>

<script setup>
import { ref } from "vue";

let a = ref(0);
let b = ref(0);
let c = ref(0);
let operator = ref("plus");
let calculate = computed(() => {
  switch (operator.value) {
    case "plus":
      console.log("plus 셀렉티드");
      return a.value + b.value;
    case "minus":
      return a.value - b.value;
    case "mul":
      return a.value * b.value;
    case "div":
      return a.value / b.value;
  }
  return 0;
});
</script>

<style scoped>
.divClass {
  width: 100%;
  height: 100%;

  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
}
h2 {
  font-size: 2rem;
}
</style>