用Vue做一个简易计算器

要在Vue.js中创建一个简单的计算器应用，首先你需要了解一些基本的概念，如组件化、数据绑定和事件处理。下面是一个基础的步骤指南：

1. **设置项目**:
使用Vue CLI创建一个新的项目，命令行输入 `vue create calculator-app`。

2. **创建组件**:
- 创建一个名为`Calculator.vue`的新组件，这是计算的主要部分。它将包含两个输入框（用于数字输入），一个选择运算符的下拉菜单，以及一个按钮进行计算。

<template>
  <div class="calculator">
    <input v-model.number="num1" type="number" placeholder="数字1">
    <select v-</option>
      <option>*</option>
      <option>/</option>
    </select>
    <input v-model.number="num2" type="number" placeholder="数字2">
    <button @click="calculate">计算</button>
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      operator: '+',
      result: ''
    };
  },
  methods: {
    calculate() {
      this.result = eval(`${this.num1} ${this.operator} ${this.num2}`);
    }
  }
};
</script>

3. **在App组件中引入并使用**:
在`src/App.vue`中引入并注册`Calculator`组件，然后在模板中显示。

<template>
  <div id="app">
    <Calculator />
  </div>
</template>

<script>
import Calculator from './components/Calculator.vue';

export default {
  components: {
    Calculator
  }
};
</script>

注意：尽管示例中使用了`eval()`函数来进行简单计算，但在实际生产环境中，这可能会有安全风险。应考虑使用更安全的方式（比如使用JavaScript的内置数学库）进行计算。