1-2.使用Vue事件绑定完成计算器功能

在Vue.js中，你可以使用`v-on`指令来实现计算器的功能。这里是一个简单的例子，我们将创建一个基础的加减乘除功能：

1. 首先，在HTML部分，创建一个按钮数组表示数字键以及运算符，并添加`@click`事件监听器：

<div id="calculator">
  <button v-for="(number, index) in numbers" :key="index" @click="handleNumber(number)">
    {{ number }}
  </button>
  
  <button @click="clear">C</button>
  <button @click="add">+</button>
  <button @click="subtract">-</button>
  <button @click="multiply">*</button>
  <button @click="divide">/</button>
  <input type="text" v-model="displayResult" disabled>
</div>

2. 然后在JavaScript（通常放在`.vue`文件的`script`标签内）里，定义`data`、`methods`和`computed`属性：

export default {
  data() {
    return {
      numbers: [7, 8, 9, 4, 5, 6, 1, 2, 3, '.', '0', '+', '-', '*', '/'],
      displayResult: '',
      currentOperand: '', // 当前操作数
      operation: null, // 当前操作符
    };
  },
  methods: {
    handleNumber(number) {
      this.currentOperand = (this.currentOperand === '') ? number : `${this.currentOperand}${number}`;
    },
    clear() {
      this.currentOperand = '';
      this.displayResult = '';
    },
    add() {
      if (this.operation !== '+') {
        this.operation = '+';
      }
      this.performOperation();
    },
    subtract() {
      if (this.operation !== '-') {
        this.operation = '-';
      }
      this.performOperation();
    },
    multiply() {
      if (this.operation !== '*') {
        this.operation = '*';
      }
      this.performOperation();
    },
    divide() {
      if (this.operation !== '/') {
        this.operation = '/';
      }
      this.performOperation();
    },
    performOperation() {
      if (this.operation) {
        let result = parseFloat(this.currentOperand) || 0;
        switch (this.operation) {
          case '+':
            this.displayResult = `${result} + ${this.number} = `;
            break;
          case '-':
            this.displayResult = `${result} - ${this.number} = `;
            break;
          case '*':
            this.displayResult = `${result} * ${this.number} = `;
            break;
          case '/':
            this.displayResult = `${result} / ${this.number} = `;
            break;
        }
        this.currentOperand = '';
        this.operation = null;
      }
    },
  },
};

在这个例子中，每当点击数字按钮，会将数字添加到当前操作数；点击运算符按钮，则切换当前操作符并准备进行计算。当你再次点击数字按钮时，之前的计算结果会被替换。