vue 四则运算组件

以下是一个使用Vue.js实现的简单四则运算组件的示例：

<template>
  <div>
    <input type="text" v-model="num1" />
    <select v-model="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="num2" />
    <button @click="calculate">Calculate</button>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      operator: '+',
      result: ''
    };
  },
  methods: {
    calculate() {
      const n1 = parseFloat(this.num1);
      const n2 = parseFloat(this.num2);

      switch (this.operator) {
        case '+':
          this.result = n1 + n2;
          break;
        case '-':
          this.result = n1 - n2;
          break;
        case '*':
          this.result = n1 * n2;
          break;
        case '/':
          this.result = n1 / n2;
          break;
        default:
          this.result = '';
      }
    }
  }
};
</script>

这个组件包含两个输入框和一个下拉选择框，用于输入两个操作数和选择运算符。点击"Calculate"按钮后，根据选择的运算符进行相应的计算，并将结果显示在页面上。