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

要在Vue.js中创建这样一个简单的页面，你可以按照以下步骤操作：

首先，你需要安装Vue CLI（命令行工具），如果你还没有安装，可以运行`npm install -g @vue/cli`来全局安装。

1. 创建一个新的Vue项目：

vue create number-comparison-app
cd number-comparison-app

2. 进入项目目录并打开`src/App.vue`文件，这里我们将编写基本的HTML结构和 Vue 的数据绑定以及事件处理：

<template>
  <div id="app">
    <input type="number" v-model="num1" placeholder="请输入第一个数字">
    <input type="number" v-model="num2" placeholder="请输入第二个数字">
    <button @click="compareNumbers">比较</button>
    <p>结果：{{ comparisonResult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      comparisonResult: ''
    };
  },
  methods: {
    compareNumbers() {
      if (this.num1 && this.num2) {
        const result = parseInt(this.num1) > parseInt(this.num1) ? '第一个数字较大' : '第二个数字较大';
        this.comparisonResult = result;
      } else {
        this.comparisonResult = '请输入完整数值';
      }
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
}
</style>

在这个例子中，我们有两个输入框用于用户输入数字，一个按钮触发`compareNumbers`方法。`compareNumbers`方法将两个输入值转换成整数然后比较它们，并更新`comparisonResult`变量的显示。

3. 现在运行项目：

npm run serve

打开浏览器访问`http://localhost:8080`，就可以看到你的数字比较功能了。