用HTML 和 vue.js 做一个简易计算器

在HTML和Vue.js中创建一个简易计算器的基本步骤如下：

首先，你需要设置基本的HTML结构，包括输入框、数字按钮、运算符按钮以及结果显示区域：

<div id="calculator">
  <input type="text" v-model.number="displayValue" disabled>
  <div class="buttons">
    <!-- 数字按钮 -->
    <button @click="appendNumber(num)" v-for="(num, index) in numbers track by $index">{{ num }}</button>
    <!-- 运算符按钮 -->
    <button @click="displayOperator = operator[index]" v-if="operator.length > index"> {{ operator[index] }}</button>
    <!-- 清除和等于按钮 -->
    <button @click="clearDisplay()">C</button>
    <button @click="calculate()">=</button>
  </div>
  <span>运算符: {{ displayOperator }}</span>
</div>

然后，在Vue组件中定义数据属性如`numbers`, `displayValue`, `operator`以及相关的计算方法：

export default {
  data() {
    return {
      numbers: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
      displayValue: '',
      operator: ['+', '-', '*', '/'],
      currentOperator: null,
    };
  },
  methods: {
    appendNumber(num) {
      this.displayValue += num;
    },
    clearDisplay() {
      this.displayValue = '';
      this.currentOperator = null;
    },
    calculate() {
      if (this.displayValue !== '' && this.operator !== null) {
        try {
          let result = eval(this.displayValue + this.currentOperator);
          this.displayValue = result.toString();
          this.currentOperator = null;
        } catch (_) {
          // 防止除数为零等错误
          this.displayValue = "Error";
        }
      }
    },
  },
};

最后，通过 Vue 的 `v-model` 将 HTML 元素绑定到 Vue 实例的数据上，并初始化组件：

new Vue({
  el: '#calculator',
});

在这个例子中，用户点击数字和运算符按钮会更新显示值，清除键清空当前显示，等号键触发计算并更新结果。