首页在html中使用vue实现一个比较三个数大小的页面

在html中使用vue实现一个比较三个数大小的页面

时间: 2024-10-10 15:13:37 浏览: 62

在HTML中使用Vue.js创建一个比较三个数大小的页面，首先需要确保已经安装了Vue，并引入到HTML文件中。这里是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three Number Comparison</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <input type="number" v-model="num1" placeholder="Number 1"> <input type="number" v-model="num2" placeholder="Number 2"> <input type="number" v-model="num3" placeholder="Number 3"> <button @click="compareNumbers">Compare</button> <p>{{ result }}</p> </div> <script> new Vue({ el: '#app', data: { num1: '', num2: '', num3: '', result: '' }, methods: { compareNumbers() { const numbers = [this.num1, this.num2, this.num3]; let max = Math.max(...numbers); let min = Math.min(...numbers); if (max === this.num1) { this.result = `The largest number is ${this.num1}`; } else if (max === this.num2) { this.result = `The largest number is ${this.num2}`; } else { this.result = `The largest number is ${this.num3}`; } if (min === this.num1) { this.result += ', and the smallest is ' + this.num1; } else if (min === this.num2) { this.result += ', and the smallest is ' + this.num2; } else { this.result += ', and the smallest is ' + this.num3; } } } }); </script> </body> </html> ``` 在这个例子中，我们创建了一个Vue实例，数据部分包括三个输入框用于用户输入数字，以及一个结果显示区`result`。点击“比较”按钮会触发`compareNumbers`方法，这个方法计算并显示三个数字中最大的和最小的。

阅读全文