vue3.0实现计算器

下面是一个简单的 Vue3.0 计算器实现。可以进行加、减、乘、除四则运算。

<template>
  <div>
    <input type="text" v-model="num1" />
    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="num2" />
    <button @click="calculate">计算</button>
    <div>结果：{{ result }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const num1 = ref(0);
    const num2 = ref(0);
    const opt = ref('+');
    const result = ref(0);

    const calculate = () => {
      switch (opt.value) {
        case '+':
          result.value = parseFloat(num1.value) + parseFloat(num2.value);
          break;
        case '-':
          result.value = parseFloat(num1.value) - parseFloat(num2.value);
          break;
        case '*':
          result.value = parseFloat(num1.value) * parseFloat(num2.value);
          break;
        case '/':
          result.value = parseFloat(num1.value) / parseFloat(num2.value);
          break;
        default:
          break;
      }
    };

    return {
      num1,
      num2,
      opt,
      result,
      calculate,
    };
  },
};
</script>

在 `setup` 函数中，使用了 `ref` 函数来创建响应式数据。在 `calculate` 函数中，通过 `switch` 语句来实现四则运算。最终结果通过 `result` 变量绑定到模板中进行显示。