By using Vue technology. To compare the sizes of two numbers, the code is as follows:
<body>
<div id="app">
<div>
<label for="number1">请输入第一个数：</label>
<input type="number" id="number1" v-model="number1">
<br>
<label for="number2">请输入第二个数：</label>
<input type="number" id="number2" v-model="number2">
<br>
比较大小：<button @click="compareNumbers">比较</button>
<p v-if="result !== null">{
{ result }}</p>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data() {
return {
number1: null,
number2: null,
result: null
}
},
methods: {
compareNumbers() {
if (this.number1 === null || this.number2 === null) {
this.result = '请输入两个数字'
} else if (this.number1 > this.number2) {
this.result = "第1个数大于第2个数"
} else if (this.number1 < this.number2) {
this.result = "第2个数大于第1个数"
} else {
this.result = `两个数相等`
}
}
}
})
</script>
</body>In the code, we use v-model for two-way data binding, and also use methods to define event processing functions.