vue.js设计非常简易计算器的源代码

创建一个简单的Vue.js计算器，我们可以使用Vue的组件化思想来构建。以下是一个基础版的简单计算器源代码示例：

<template>
  <div class="calculator">
    <input type="text" v-model="result" disabled>
    <div class="buttons">
      <button @click="clear">C</button>
      <button v-for="(number, index) in numbers" :key="index" @click="addNumber(number)">
        {{ number }}
      </button>
      <button @click="performOperation('+')">+</button>
      <!-- 添加其他运算符按钮如减、乘、除 -->
      <button @click="performOperation('-')">-</button>
      <button @click="performOperation('*')">*</button>
      <button @click="performOperation('/')">/</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: '',
      numbers: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0'],
      operations: ['+', '-', '*', '/']
    };
  },
  methods: {
    addNumber(number) {
      this.result += number;
    },
    clear() {
      this.result = '';
    },
    performOperation(operation) {
      if (this.result !== '') {
        const value = parseFloat(this.result);
        const lastNumber = parseFloat(number);
        switch (operation) {
          case '+':
            this.result = `${value} + ${lastNumber}`;
            break;
          case '-':
            this.result = `${value} - ${lastNumber}`;
            break;
          case '*':
            this.result = `${value} * ${lastNumber}`;
            break;
          case '/':
            if (lastNumber !== 0) {
              this.result = `${value} / ${lastNumber}`;
            } else {
              alert('除数不能为零');
            }
            break;
        }
      }
    }
  }
};
</script>

<style scoped>
.calculator {
  width: 200px;
}
.buttons {
  display: flex;
  justify-content: space-between;
}
button {
  margin: 5px;
}
</style>

在这个例子中，我们定义了一个组件，包含输入框显示结果和一系列数字和运算符按钮。当用户点击按钮时，我们会更新`result`变量，并在适当的时候执行计算操作。

注意，这只是一个基本版本，实际应用可能需要添加错误处理和更复杂的用户交互，例如清除历史记录、小数点等。