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

在Vue3中，你可以使用`setup`函数结合`ref`来创建响应式的变量，并利用模板和事件处理来实现这个功能。这里是一个简单的示例：

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

<script setup>
import { ref } from 'vue';

const num1 = ref('');
const num2 = ref('');
let result = '';

function compareNumbers() {
  const num1Val = Number(num1.value);
  const num2Val = Number(num2.value);

  if (isNaN(num1Val) || isNaN(num2Val)) {
    result = "请输入有效的数字";
  } else {
    result = num1Val > num2Val ? '第一个数字较大' : '第二个数字较大';
  }
}
</script>

<style scoped>
#app {
  display: flex;
  justify-content: space-between;
}
</style>

在这个例子中，我们有两个`v-model`绑定的输入框用于获取用户输入的两个数字，一个按钮绑定了`compareNumbers`方法。当点击按钮时，会检查输入是否为数字，然后计算并更新结果。