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

Vue.js是一个轻量级的前端JavaScript框架，它专注于构建用户界面，通过组件化的方式来简化开发过程。为了实现这个功能，我们可以创建一个简单的HTML结构，并利用Vue的响应式数据绑定和事件处理机制。

首先，在HTML部分，我们需要两个输入框用于输入数字、一个按钮以及显示结果的元素：

<div id="app">
  <label>数字1:</label>
  <input type="number" v-model="num1" />
  
  <label>数字2:</label>
  <input type="number" v-model="num2" />

  <button @click="compareNumbers">比较</button>

  <p>结果: {{ result }}</p>
</div>

接下来，在`<script>`标签内，我们设置一个Vue实例并定义相关的数据和方法：

new Vue({
  el: '#app',
  data: {
    num1: '',
    num2: '',
    result: ''
  },
  methods: {
    compareNumbers() {
      if (this.num1 && this.num2) {
        this.result = this.num1 > this.num2 ? '数字1较大' : this.num1 < this.num2 ? '数字2较大' : '数字相等';
      } else {
        this.result = '请输入完整的数字';
      }
    }
  }
})

在这个例子中，`v-model`用于双向数据绑定，当你输入数字后，它们会实时更新到对应的Vue数据属性。`@click`事件监听器绑定了`compareNumbers`方法，每当点击“比较”按钮时，就会检查两个数字是否都已输入，然后比较它们并更新结果显示。

现在你可以将这两个文件放在一起，运行起来，你会看到一个可以比较两个数字大小的简单页面。当你输入两个数字并点击按钮，结果会在页面上立即显示出来。