vue实现计算机

Vue 实现计算器的方法

使用 Vue 实现计算器可以结合其响应式数据绑定和组件化特性，以下是一个完整的实现方案：

创建 Vue 项目

通过 Vue CLI 或 Vite 初始化项目，确保安装最新版本的 Vue 3：

npm init vue@latest calculator
cd calculator
npm install

核心组件结构

在 src/App.vue 中构建计算器主体：

<template>
  <div class="calculator">
    <div class="display">{{ currentDisplay }}</div>
    <div class="buttons">
      <button 
        v-for="btn in buttons" 
        :key="btn" 
        @click="handleClick(btn)"
        :class="{ 'operator': ['+','-','×','÷'].includes(btn) }"
      >
        {{ btn }}
      </button>
    </div>
  </div>
</template>

数据与逻辑实现

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

const currentDisplay = ref('0');
const firstOperand = ref(null);
const operator = ref(null);
const waitingForSecondOperand = ref(false);

const buttons = [
  '7', '8', '9', '÷',
  '4', '5', '6', '×',
  '1', '2', '3', '-',
  '0', 'C', '=', '+'
];

const handleClick = (button) => {
  if (!isNaN(button) || button === '.') {
    handleNumberInput(button);
  } else if (['+','-','×','÷'].includes(button)) {
    handleOperator(button);
  } else if (button === '=') {
    handleEquals();
  } else if (button === 'C') {
    handleClear();
  }
};

const handleNumberInput = (num) => {
  if (waitingForSecondOperand.value) {
    currentDisplay.value = num;
    waitingForSecondOperand.value = false;
  } else {
    currentDisplay.value = currentDisplay.value === '0' ? num : currentDisplay.value + num;
  }
};

const handleOperator = (op) => {
  const inputValue = parseFloat(currentDisplay.value);

  if (firstOperand.value === null) {
    firstOperand.value = inputValue;
  } else if (operator.value) {
    const result = calculate(firstOperand.value, parseFloat(currentDisplay.value), operator.value);
    currentDisplay.value = String(result);
    firstOperand.value = result;
  }

  operator.value = op;
  waitingForSecondOperand.value = true;
};

const handleEquals = () => {
  if (operator.value && !waitingForSecondOperand.value) {
    const result = calculate(firstOperand.value, parseFloat(currentDisplay.value), operator.value);
    currentDisplay.value = String(result);
    firstOperand.value = null;
    operator.value = null;
  }
};

const handleClear = () => {
  currentDisplay.value = '0';
  firstOperand.value = null;
  operator.value = null;
  waitingForSecondOperand.value = false;
};

const calculate = (first, second, op) => {
  switch (op) {
    case '+': return first + second;
    case '-': return first - second;
    case '×': return first * second;
    case '÷': return first / second;
    default: return second;
  }
};
</script>

样式设计

<style scoped>
.calculator {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.display {
  background: #222;
  color: white;
  font-size: 2em;
  padding: 20px;
  text-align: right;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #ddd;
}

button {
  border: none;
  padding: 20px;
  font-size: 1.2em;
  cursor: pointer;
  background: white;
  transition: background 0.3s;
}

button:hover {
  background: #f0f0f0;
}

button.operator {
  background: #f5923e;
  color: white;
}

button.operator:hover {
  background: #e07d2e;
}
</style>

功能扩展建议

• 添加键盘事件支持：监听键盘输入实现物理键盘操作

  
  onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
  });

onUnmounted(() => { window.removeEventListener('keydown', handleKeyDown); });

const handleKeyDown = (e) => { const key = e.key; if (/[0-9.]/.test(key)) handleClick(key); else if (key === '+') handleClick('+'); // 其他按键处理... };

- 历史记录功能：使用 Vuex 或 Pinia 存储计算历史
- 科学计算功能：扩展运算符处理更复杂的数学运算
- 主题切换：通过 CSS 变量实现暗黑模式等主题切换

该实现完整覆盖了基本计算器的所有功能，包括四则运算、连续运算、清除功能等，响应式设计确保在不同设备上正常显示。