使用vue用户输入两个数,计算两个数的和并显示
时间: 2024-01-21 09:18:59 浏览: 32
好的,可以按照以下步骤实现:
1. 在Vue组件中声明两个变量num1和num2,用于保存用户输入的两个数值。
2. 定义一个方法calculateSum,用于计算两个数的和。方法内部使用num1和num2的值进行加法运算,并将结果保存在一个叫做sum的变量中。
3. 在模板中使用v-model指令将用户输入的值绑定到num1和num2变量上。
4. 在模板中添加一个按钮,当用户点击按钮时调用calculateSum方法,计算并显示两个数的和。
下面是一个示例代码:
```
<template>
<div>
<input v-model="num1" type="number" placeholder="请输入第一个数">
<input v-model="num2" type="number" placeholder="请输入第二个数">
<button @click="calculateSum">计算两数之和</button>
<p v-if="sum">两数之和为:{{ sum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
num1: 0,
num2: 0,
sum: 0
};
},
methods: {
calculateSum() {
this.sum = this.num1 + this.num2;
}
}
};
</script>
```
这样,用户输入两个数,点击按钮后就能够计算出它们的和并显示在页面上了。