vue简易计算机代码

Vue.js 简易计算器的代码示例通常是一个小型项目，它展示了如何在 Vue 中创建组件以及处理用户输入和计算结果。下面是一个简单的Vue单文件组件（.vue）的形式：

<template>
  <div class="calculator">
    <input type="number" v-model.number="display" @keydown.enter="calculate">
    <div class="buttons">
      <button @click="clear">C</button>
      <button v-for="(value, index) in numbers" :key="index" :@click="add(value)">
        {{ value }}
      </button>
      <button @click="subtract">-</button>
      <button @click="multiply">*</button>
      <button @click="divide">/</button>
      <button @click="equals">=</button>
    </div>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      display: '',
      numbers: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '.'],
      operators: ['+', '-', '*', '/'],
      result: ''
    };
  },
  methods: {
    clear() {
      this.display = '';
    },
    add(value) {
      if (this.display !== '') {
        this.result = parseFloat(this.display) + parseFloat(value);
        this.display = '';
      } else {
        this.display += value;
      }
    },
    subtract() {
      // 类似于 add 方法，但处理减法操作
    },
    multiply() {
      // 类似于 add 方法，但处理乘法操作
    },
    divide() {
      // 类似于 add 方法，但处理除法操作
    },
    equals() {
      // 如果当前不是数字，则先转换为浮点数再计算
      if (this.display !== '') {
        let value = parseFloat(this.display);
        switch (this.operator) {
          case '+':
            this.result = value + parseFloat(this.secondOperand);
            break;
          case '-':
            this.result = value - parseFloat(this.secondOperand);
            break;
          case '*':
            this.result = value * parseFloat(this.secondOperand);
            break;
          case '/':
            this.result = value / parseFloat(this.secondOperand);
            break;
        }
        this.display = this.result.toFixed(2); // 显示结果到小数点后两位
      }
    },
    calculate(event) {
      // 检查 enter 键是否按下并触发等于按钮的操作
      if (event.key === 'Enter') {
        this.equals();
      }
    },
    secondOperand() {
      // 获取上一次点击的运算符以便进行计算，这里简化为只保存最后一次
      return this.operators[this.operators.length - 1];
    }
  },
  computed: {
    operator() {
      // 当前操作符，通过按钮点击获取
      const lastButtonClicked = this.$route.query.button;
      return lastButtonClicked ? this.operators.includes(lastButtonClicked) ? lastButtonClicked : null : null;
    },
    secondOperand() {
      // 上一次运算的第二个操作数，用于复合操作
      // 这里可以更复杂地存储历史记录，但在简单示例中仅保留最后一个
      return this.previousSecondOperand || this.secondOperand();
    },
    previousSecondOperand() {
      // 清空这个属性以准备下一次运算
      return this.operator;
    }
  },
  // 其他路由、数据绑定等配置
}
</script>

<style scoped>
/* 样式省略 */
</style>