用vue实现一个比较2个数大小的页面，当输入2个数字后，单击“比较”按钮后自动比较这2个数的大小，页面效果参考图3-20。比较数字大小结果显示的页面效果参考图，要求把自己的名字打在界面上。

在Vue中创建一个比较两个数字大小的页面，可以按照以下步骤进行：

1. 安装并设置Vue环境：首先确保你已经安装了Node.js和Vue CLI，然后通过命令行运行`vue create my-comparsion-app`初始化一个新的Vue项目。

2. 创建组件：在项目目录下，创建一个名为`Comparison.vue`的新文件，这是我们的主组件。在这个组件里，我们可以创建一个表单用于输入数字、一个按钮和显示结果的区域。

<template>
  <div>
    <input v-model="number1" type="number" placeholder="请输入第一个数字">
    <input v-model="number2" type="number" placeholder="请输入第二个数字">
    <button @click="compareNumbers">比较</button>
    <p>{{ result }}</p>
    <!-- 显示姓名的位置 -->
    <p>开发者: {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: '',
      number2: '',
      result: ''
    };
  },
  methods: {
    compareNumbers() {
      const num1 = Number(this.number1);
      const num2 = Number(this.number1); // 注意这里应该是this.number2

      if (num1 > num2) {
        this.result = `${num1} 比 ${num2} 大`;
      } else if (num1 < num2) {
        this.result = `${num1} 比 ${num2} 小`;
      } else {
        this.result = '两个数字相等';
      }
    }
  },
  // 如果需要添加，可以在data中添加name属性并在这里赋值
  // mounted() {
  //   this.name = 'YourName'; // 替换为你的实际姓名
  // }
};
</script>

3. 引入组件：在`App.vue`文件中引入`Comparison`组件，并作为子组件展示。

4. 测试应用：启动你的Vue服务器，打开浏览器查看效果，输入数字并点击“比较”按钮，会显示出数字的大小对比。