用vue实现一个比较两个数字大小的页面

在Vue.js中创建一个简单的页面用于比较两个数字大小，你可以这样做：

1. 首先，安装并设置Vue CLI项目。如果你还没有安装，可以运行`npm install -g @vue/cli`然后初始化一个新的项目。

2. 创建一个名为`components`的新文件夹，并在其中创建一个名为`NumberComparator.vue`的组件文件。在这个组件中，我们可以使用模板、数据绑定和事件处理来实现功能。

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

<script>
export default {
  data() {
    return {
      num1: '',
      num2: '',
      result: ''
    };
  },
  methods: {
    compareNumbers() {
      const num1 = Number(this.num1);
      const num2 = Number(this.num1); // 确保输入的是数字

      if (num1 > num2) {
        this.result = `第一个数字 ${this.num1} 比 第二个数字 ${this.num2} 大`;
      } else if (num1 < num2) {
        this.result = `第一个数字 ${this.num1} 比 第二个数字 ${this.num2} 小`;
      } else {
        this.result = '两个数字相等';
      }
    }
  }
};
</script>

<style scoped>
.number-comparator {
  display: flex;
  justify-content: space-between;
}
</style>

这个组件有两个输入框让用户输入数字，一个按钮触发`compareNumbers`方法，方法会把输入转换成数字进行比较，并将结果显示在一个段落里。