用vue在页面上使用input输入两个数,实现求两个数之间的偶数和!并且输出在页面

Question

如题所述

Answer 1

下面是一个简单的 Vue 示例代码，用于实现输入两个数并求偶数和的功能，并将结果输出到页面上：
HTML 代码：
html复制代码<div id="app">
<label for="start">起始数值：</label>
<input type="number" id="start" v-model="startNum">
<br>
<label for="end">结束数值：</label>
<input type="number" id="end" v-model="endNum">
<br><br>
<button @click="calculate">计算</button>
<br><br>
<div v-if="result !== null">偶数和：{{ result }}</div></div>

Vue.js 代码：
javascript复制代码new Vue({ el: '#app', data: { startNum: null, endNum: null, result: null
}, methods: { calculate: function () { let start = Number(this.startNum) let end = Number(this.endNum) let sum = 0
for (let i = start; i <= end; i++) { if (i % 2 === 0) {
sum += i
}
} this.result = sum
}
}
})

在这个示例中，我们使用了 Vue 的数据绑定功能（即 v-model）来实现从输入框读取用户输入的起始数值和结束数值，并通过点击“计算”按钮触发 calculate 方法来计算偶数和。在 calculate 中，我们使用了 for 循环和 if 判断来遍历起始数值和结束数值之间的所有整数，并累加其中的偶数。最后，我们将计算结果存储在组件的 result 数据属性中，并通过 Vue 的条件渲染功能（即 v-if）来控制是否显示计算结果。

Answer 2

<template>
<div>
<input type="number" v-model="num1" placeholder="请输入第一个数">
<input type="number" v-model="num2" placeholder="请输入第二个数">
<button @click="sumEven">计算偶数和</button>
<p>偶数和为: {{ evenSum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
num1: '',
num2: '',
evenSum: 0,
}
},
methods: {
sumEven() {
const n1 = parseInt(this.num1);
const n2 = parseInt(this.num2);
let sum = 0;
for (let i = Math.min(n1, n2); i <= Math.max(n1, n2); i++) {
if (i % 2 === 0) {
sum += i;
}
}
this.evenSum = sum;
},
},
}
</script>