当前位置：首页 > VUE

vue实现计算器

2026-01-21 23:17:58VUE

Vue 实现计算器的方法

使用 Vue 实现计算器可以充分利用其响应式数据和组件化特性。以下是一个简单的实现方案：

创建 Vue 项目

使用 Vue CLI 或 Vite 初始化项目：

npm init vue@latest calculator
cd calculator
npm install

核心代码实现

在 src/App.vue 或单独组件中实现：

<template>
  <div class="calculator">
    <div class="display">{{ current || '0' }}</div>
    <div class="buttons">
      <button @click="clear">C</button>
      <button @click="sign">+/-</button>
      <button @click="percent">%</button>
      <button @click="divide" class="operator">÷</button>

      <button @click="append('7')">7</button>
      <button @click="append('8')">8</button>
      <button @click="append('9')">9</button>
      <button @click="times" class="operator">×</button>

      <button @click="append('4')">4</button>
      <button @click="append('5')">5</button>
      <button @click="append('6')">6</button>
      <button @click="minus" class="operator">-</button>

      <button @click="append('1')">1</button>
      <button @click="append('2')">2</button>
      <button @click="append('3')">3</button>
      <button @click="add" class="operator">+</button>

      <button @click="append('0')" class="zero">0</button>
      <button @click="dot">.</button>
      <button @click="equal" class="operator">=</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: '',
      previous: null,
      operator: null,
      operatorClicked: false
    }
  },
  methods: {
    clear() {
      this.current = '';
    },
    sign() {
      this.current = this.current.charAt(0) === '-' ? 
        this.current.slice(1) : '-' + this.current;
    },
    percent() {
      this.current = parseFloat(this.current) / 100;
    },
    append(number) {
      if (this.operatorClicked) {
        this.current = '';
        this.operatorClicked = false;
      }
      this.current = `${this.current}${number}`;
    },
    dot() {
      if (this.current.indexOf('.') === -1) {
        this.append('.');
      }
    },
    setPrevious() {
      this.previous = this.current;
      this.operatorClicked = true;
    },
    divide() {
      this.operator = (a, b) => a / b;
      this.setPrevious();
    },
    times() {
      this.operator = (a, b) => a * b;
      this.setPrevious();
    },
    minus() {
      this.operator = (a, b) => a - b;
      this.setPrevious();
    },
    add() {
      this.operator = (a, b) => a + b;
      this.setPrevious();
    },
    equal() {
      this.current = `${this.operator(
        parseFloat(this.previous), 
        parseFloat(this.current)
      )}`;
      this.previous = null;
    }
  }
}
</script>

<style>
.calculator {
  width: 300px;
  margin: 50px auto;
  font-size: 24px;
}
.display {
  background: #f0f0f0;
  padding: 15px;
  text-align: right;
  border: 1px solid #ddd;
  border-radius: 5px 5px 0 0;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
}
button {
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
}
button:hover {
  background: #eee;
}
.operator {
  background: #f0f0f0;
}
.zero {
  grid-column: span 2;
}
</style>