vue.js 任务2-5】 实现一个比较两个数大小的页面。应用效果如图所示。 要求：(1)使用v-model 进行双向数据绑定。-2） 使用metheds 定义事件处理函数。

Vue.js 任务2-5要求你创建一个简单的页面，该页面可以让用户输入两个数字，并通过JavaScript计算并显示它们的大小关系。以下是步骤描述：

1. 首先，你需要在HTML部分创建一个基础结构，包括两个输入框用于输入数值、一个标签来显示结果以及按钮触发比较操作：

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

2. 接着，在Vue实例中设置data属性，初始化`num1`和`num2`值，以及一个`result`属性来存放比较结果显示：

new Vue({
  el: '#app',
  data: {
    num1: '',
    num2: '',
    result: ''
  },
  methods: {
    compareNumbers: function() {
      // 这里将编写比较函数
    }
  }
})

3. 在`compareNumbers`方法中，获取输入的两个数值，然后使用条件语句来判断它们的大小：

methods: {
  compareNumbers: function() {
    this.result = '';
    if (Number(this.num1) > Number(this.num2)) {
      this.result = '第一个数更大';
    } else if (Number(this.num1) < Number(this.num2)) {
      this.result = '第二个数更大';
    } else {
      this.result = '两个数相等';
    }
  }
}

4. 现在当用户点击“比较”按钮时，`compareNumbers`方法会被触发，更新`result`的值。双向数据绑定会自动保持`num1`和`num2`的变化同步。