用Vue.js中的v-if,v-else-if指令实现一个简易的计算器

在Vue.js中，我们可以使用`v-if`, `v-else-if`, 和 `v-else` 指令来实现一个简单的计算器功能。这里假设我们将构建一个支持加减乘除的基本计算器。以下是一个基础的例子：

HTML部分：

<div id="calculator">
  <input type="text" v-model.number="displayValue" disabled>
  <div v-for="(op, index) in operations" :key="index">
    <button @click="applyOperator(op)" :class="{ active: op == currentOperator }">{{ op }}</button>
  </div>
  <button v-if="currentOperator" @click="clearDisplay()">清除</button>
  <button @click="calculateResult()" v-if="currentOperator">计算</button>
  <span v-if="result">{{ result }}</span>
</div>

JavaScript部分 (Vue组件):

export default {
  data() {
    return {
      displayValue: '',
      currentOperator: '',
      operations: ['+', '-', '*', '/'],
      result: null,
    };
  },
  computed: {
    operatorButtons() {
      return this.operations.map(op => ({
        label: op,
        value: op,
      }));
    },
  },
  methods: {
    applyOperator(op) {
      this.currentOperator = op;
      this.displayValue += op;
    },
    clearDisplay() {
      this.displayValue = '';
      this.currentOperator = '';
    },
    calculateResult() {
      try {
        let val = parseFloat(this.displayValue);
        switch (this.currentOperator) {
          case '+':
            this.result = val + this.result;
            break;
          case '-':
            this.result = val - this.result;
            break;
          case '*':
            this.result = val * this.result;
            break;
          case '/':
            this.result = val / this.result;
            break;
          default:
            this.result = null;
        }
        this.displayValue = String(this.result);
        this.currentOperator = '';
      } catch (error) {
        // 清除错误操作
        this.clearDisplay();
      }
    },
  },
};

在这个示例中，我们创建了一个输入框用于显示当前的操作数，一组按钮对应于加、减、乘、除四种运算符，还有一个清除按钮和一个计算结果的按钮。当用户点击运算符按钮时，会将当前运算符添加到输入值上，并更新当前运算符。点击计算按钮则尝试计算当前输入值的结果，如果发生错误，则清空输入值和结果。