制作一个使用v-on指令完成加减乘除的效果页面

制作一个使用Vue.js的v-on指令完成加减乘除效果的页面，首先你需要了解v-on是Vue.js中的事件绑定指令，用于处理用户交互或者数据变化。下面是一个简单的例子，展示了如何创建一个计算框并允许用户输入数字以及使用v-on来触发计算操作：

HTML部分:

<div id="app">
  <input type="number" v-model.number="num1" placeholder="请输入第一个数字">
  <select v-model="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="number" v-model.number="num2" placeholder="请输入第二个数字">
  <button @click="calculate">计算</button>
  <p>结果: {{ result }}</p>
</div>

JavaScript部分 (using Vue):

new Vue({
  el: '#app',
  data: {
    num1: '',
    operator: '+',
    num2: '',
    result: ''
  },
  methods: {
    calculate() {
      let nums = [Number(this.num1), Number(this.num2)];
      switch (this.operator) {
        case '+':
          this.result = nums[0] + nums[1];
          break;
        case '-':
          this.result = nums[0] - nums[1];
          break;
        case '*':
          this.result = nums[0] * nums[1];
          break;
        case '/':
          if (nums[1] !== 0) {
            this.result = nums[0] / nums[1];
          } else {
            alert('除数不能为零');
          }
          break;
      }
    }
  }
});

在这个示例中，`v-model`用于双向数据绑定，当用户修改输入框的内容时，数据会自动更新；`@click`用于绑定了计算按钮的点击事件，当用户点击计算时，会调用`calculate`方法进行运算，并显示结果。