Vue.js 计算器程序示例：实现加减乘除功能

这是一个简单的计算器示例，使用 Vue.js 框架编写，包括基本的加减乘除操作：

<template>
  <div id='calculator'>
    <div class='display'>{{ display }}</div>
    <div class='buttons'>
      <div class='row'>
        <button class='number' @click='append('7')'>7</button>
        <button class='number' @click='append('8')'>8</button>
        <button class='number' @click='append('9')'>9</button>
        <button class='operator' @click='operator('/')'>÷</button>
      </div>
      <div class='row'>
        <button class='number' @click='append('4')'>4</button>
        <button class='number' @click='append('5')'>5</button>
        <button class='number' @click='append('6')'>6</button>
        <button class='operator' @click='operator('*')'>×</button>
      </div>
      <div class='row'>
        <button class='number' @click='append('1')'>1</button>
        <button class='number' @click='append('2')'>2</button>
        <button class='number' @click='append('3')'>3</button>
        <button class='operator' @click='operator('-')'>-</button>
      </div>
      <div class='row'>
        <button class='number' @click='append('0')'>0</button>
        <button class='operator' @click='decimal()'>.</button>
        <button class='operator' @click='operator('+')'>+</button>
        <button class='equal' @click='calculate()'>=</button>
      </div>
      <div class='row'>
        <button class='clear' @click='clear()'>C</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        display: '0',
        operator: null,
        operand1: null,
        operand2: null,
        result: null,
        decimal: false
      };
    },
    methods: {
      append(value) {
        if (this.display === '0') {
          this.display = value;
        } else {
          this.display += value;
        }
      },
      operator(op) {
        this.operator = op;
        this.operand1 = parseFloat(this.display);
        this.display = '0';
        this.decimal = false;
      },
      decimal() {
        if (!this.decimal) {
          this.display += '.';
          this.decimal = true;
        }
      },
      calculate() {
        this.operand2 = parseFloat(this.display);
        switch (this.operator) {
          case '+':
n            this.result = this.operand1 + this.operand2;
            break;
          case '-':
n            this.result = this.operand1 - this.operand2;
            break;
          case '*':
n            this.result = this.operand1 * this.operand2;
            break;
          case '/':
n            this.result = this.operand1 / this.operand2;
            break;
          default:
            break;
        }
        this.display = this.result.toString();
      },
      clear() {
        this.display = '0';
        this.operator = null;
        this.operand1 = null;
        this.operand2 = null;
        this.result = null;
        this.decimal = false;
      }
    }
  };
</script>

<style>
  #calculator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .display {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 48px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 0 20px;
  }

  .buttons {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    width: 100%;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

  button {
    flex: 1;
    height: 60px;
    font-size: 24px;
    border: none;
    background-color: #fff;
    cursor: pointer;
  }

  button:hover {
    background-color: #e0e0e0;
  }

  .number {
    color: #333;
  }

  .operator {
    color: #fff;
    background-color: #f44336;
  }

  .equal {
    color: #fff;
    background-color: #4caf50;
  }

  .clear {
    color: #fff;
    background-color: #2196f3;
    font-size: 18px;
    height: 40px;
    margin: 10px;
  }
</style>

在这个示例中，我们使用data属性来存储当前的显示值、操作符、操作数和结果，以及一个标志来表示小数点是否已经输入。我们使用methods属性来定义处理用户输入的方法，例如append方法将数字添加到当前显示值中，operator方法将操作符保存在状态中，并将当前显示值转换为一个操作数，等等。最后，我们使用简单的HTML和CSS来呈现计算器的UI。