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

要在Vue中实现这个功能，你可以创建一个简单的组件，包含两个输入框用于用户输入数字、一个按钮以及一个计算结果的展示区域。这里是一个基础的示例：

<template>
  <div class="comparison">
    <input type="number" v-model.number="num1" placeholder="请输入第一个数字">
    <input type="number" v-model.number="num2" placeholder="请输入第二个数字">
    <button @click="compareNumbers">比较</button>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      result: '数字比较结果',
    };
  },
  methods: {
    compareNumbers() {
      if (this.num1 && this.num2) {
        const num1 = parseFloat(this.num1);
        const num2 = parseFloat(this.num1);

        if (num1 < num2) {
          this.result = `数字${num1}小于数字${num2}`;
        } else if (num1 > num2) {
          this.result = `数字${num1}大于数字${num2}`;
        } else {
          this.result = `数字${num1}等于数字${num2}`;
        }
      } else {
        this.result = '请输入完整的数字';
      }
    },
  },
};
</script>

<style scoped>
.comparison {
  width: 400px;
  margin: auto;
}
</style>

在这个例子中，我们使用了Vue的`v-model`指令来双向绑定输入框的数据，并在`compareNumbers`方法中进行数值比较。结果会实时更新在`<p>`标签内的`result`属性。

请注意，为了确保输入的是有效数字，我们在处理比较之前先尝试将字符串转换成浮点数(`parseFloat`)。如果用户输入的内容无法转换为数字，则会显示提示信息。