vue简易计算器代码

Vue.js创建一个简单的计算器功能，可以利用其组件化和响应式的数据绑定特性。下面是一个基本的Vue计算器组件示例：

<template>
  <div class="calculator">
    <input type="text" v-model.number="result" disabled>
    <div>
      <button @click="add(1)">1</button>
      <button @click="add(2)">2</button>
      <button @click="add(3)">3</button>
      <button @click="add('+')">+</button>
    </div>
    <!-- ...重复上面的行添加其他数字和运算符 -->
    <div>
      <button @click="subtract(1)">1</button> <!-- ... -->
      <button @click="clear">C</button>
      <button @click="equal">=</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: 0, // 记录当前的计算结果
    };
  },
  methods: {
    add(num) {
      this.result += num;
    },
    subtract(num) { /* 类似地，处理减法操作 */ },
    multiply(num) { /* 处理乘法操作 */ },
    divide(num) { /* 处理除法操作 */ },
    clear() {
      this.result = 0;
    },
    equal() {
      // 这里需要实现真正的数学计算，比如使用eval或Number解析字符串
      // 但在实际项目中，我们应避免直接使用eval，因为它安全风险高
      // 可以考虑使用JavaScript内置的`parseFloat`或自定义一个解析函数
      // let parsedResult = parseFloat(this.result); // 使用 parseFloat 或类似方法
    },
  },
};
</script>

<style scoped>
/* 添加样式以便于布局和视觉呈现 */
.calculator {
  display: grid;
}
button {
  margin: 5px;
}
</style>

在这个例子中，`v-model.number`用于双向数据绑定，并将输入框内容转换为数字类型。每个按钮的点击事件绑定了相应的计算方法，如`add`, `subtract`, 等。`clear` 和 `equal` 方法负责清空和执行最终计算。