Vue.js 计算器代码示例：简单易懂的实现

<template>
  <div class='calculator'>
    <div class='display'>{{display}}</div>
    <div class='buttons'>
      <button v-for='button in buttons' :key='button.id' @click='onButtonClick(button.value)'>{{button.label}}</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Calculator',
  data() {
    return {
      display: '0',
      buttons: [
        { id: 1, value: 'C', label: 'C' },
        { id: 2, value: '+/-', label: '+/-' },
        { id: 3, value: '%', label: '%' },
        { id: 4, value: '/', label: '÷' },
        { id: 5, value: 7, label: '7' },
        { id: 6, value: 8, label: '8' },
        { id: 7, value: 9, label: '9' },
        { id: 8, value: '*', label: 'x' },
        { id: 9, value: 4, label: '4' },
        { id: 10, value: 5, label: '5' },
        { id: 11, value: 6, label: '6' },
        { id: 12, value: '-', label: '-' },
        { id: 13, value: 1, label: '1' },
        { id: 14, value: 2, label: '2' },
        { id: 15, value: 3, label: '3' },
        { id: 16, value: '+', label: '+' },
        { id: 17, value: 0, label: '0' },
        { id: 18, value: '.', label: '.' },
        { id: 19, value: '=', label: '=' },
      ],
      currentInput: '',
      previousInput: '',
      operator: '',
      result: '',
      resetDisplay: false
    }
  },
  methods: {
    onButtonClick(value) {
      if (value === 'C') {
        this.resetCalculator()
      } else if (value === '+/-') {
        this.toggleSign()
      } else if (value === '%') {
        this.calculatePercentage()
      } else if (value === '+' || value === '-' || value === '*' || value === '/') {
        this.setOperator(value)
      } else if (value === '=') {
        this.calculateResult()
      } else {
        this.handleInput(value)
      }
    },
    handleInput(value) {
      if (this.resetDisplay) {
        this.currentInput = ''
        this.resetDisplay = false
      }
      if (value === '.' && this.currentInput.includes('.')) {
        return
      }
      this.currentInput += value.toString()
      this.display = this.currentInput
    },
    toggleSign() {
      this.currentInput *= -1
      this.display = this.currentInput
    },
    calculatePercentage() {
      this.currentInput /= 100
      this.display = this.currentInput
    },
    setOperator(operator) {
      this.previousInput = this.currentInput
      this.currentInput = ''
      this.operator = operator
    },
    calculateResult() {
      switch (this.operator) {
        case '+':
          this.result = parseFloat(this.previousInput) + parseFloat(this.currentInput)
          break
        case '-':
          this.result = parseFloat(this.previousInput) - parseFloat(this.currentInput)
          break
        case '*':
          this.result = parseFloat(this.previousInput) * parseFloat(this.currentInput)
          break
        case '/':
          this.result = parseFloat(this.previousInput) / parseFloat(this.currentInput)
          break
      }
      this.currentInput = this.result.toString()
      this.display = this.currentInput
      this.resetDisplay = true
    },
    resetCalculator() {
      this.display = '0'
      this.currentInput = ''
      this.previousInput = ''
      this.operator = ''
      this.result = ''
      this.resetDisplay = false
    }
  }
}
</script>
<style>
.calculator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.display {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  height: 50px;
  border: 1px solid grey;
  font-size: 24px;
  padding: 10px;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 300px;
}

button {
  width: 70px;
  height: 70px;
  font-size: 24px;
  border: 1px solid grey;
  border-radius: 5px;
  margin: 10px;
  background-color: #f2f2f2;
}
</style>
<p>这是一个简单的计算器，支持加减乘除、百分比、正负号等功能。您可以将此代码复制到一个.vue文件中运行它。</p>