微信小程序同一行实现两个数相加
时间: 2024-10-11 14:15:21 浏览: 16
在微信小程序中,如果你想在同一行显示并让用户输入两个数字然后相加,你可以使用`view`标签来创建一个布局,并结合`input`元素用于获取用户输入,以及`button`元素触发计算操作。以下是一个简单的示例:
```html
<view class="container">
<label>第一个数字:</label>
<input type="number" bindinput="handleInput1" placeholder="请输入数字" />
+
<label>第二个数字:</label>
<input type="number" bindinput="handleInput2" placeholder="请输入数字" />
=
<text>{{ result }}</text> <!-- 显示结果 -->
</view>
<button bindtap="calculate">相加</button>
<script>
Page({
data: {
input1: '',
input2: '',
result: '0'
},
handleInput1(e) {
this.setData({
input1: e.detail.value
});
},
handleInput2(e) {
this.setData({
input2: e.detail.value
});
},
calculate() {
const num1 = parseInt(this.data.input1);
const num2 = parseInt(this.data.input2);
if (!isNaN(num1) && !isNaN(num2)) {
this.setData({
result: num1 + num2
});
}
}
})
</script>
<style scoped>
.container {
display: flex;
align-items: center;
}
</style>
```
在这个例子中,用户可以在两个输入框里输入数字,点击“相加”按钮后,会触发`calculate`函数,将两个数字相加并将结果显示在相应的位置。
阅读全文