JS,Vue书写逻辑:多个下拉框,当下拉框一选择,将值传给B,当点确定时,B就是结果,点取消时,清除刚刚下拉框传的数据,还原为上一次确定后的数据
时间: 2023-08-24 08:05:11 浏览: 44
好的,我理解了你的问题。以下是JS和Vue的代码实现:
JS实现:
首先,我们需要定义一个全局变量来存储上一次确定后的数据:
```
var prevB = '';
```
然后,我们需要监听每个下拉框的选择事件,并将选中的值存储到变量B中:
```
var B = '';
var selectA = document.getElementById('selectA');
var selectB = document.getElementById('selectB');
selectA.addEventListener('change', function() {
B = this.value;
});
selectB.addEventListener('change', function() {
B = this.value;
});
```
接下来,我们需要监听确定和取消按钮的点击事件。当点击确定按钮时,我们将B的值赋给prevB,并将B的值进行处理。当点击取消按钮时,我们将B的值清空,并将prevB的值重新赋给B。
```
var confirmBtn = document.getElementById('confirmBtn');
var cancelBtn = document.getElementById('cancelBtn');
confirmBtn.addEventListener('click', function() {
prevB = B;
// 处理B的值
});
cancelBtn.addEventListener('click', function() {
B = '';
B = prevB;
});
```
Vue实现:
首先,我们需要定义一个data对象来存储当前选中的值和上一次确定后的值:
```
data: {
A: '',
B: '',
prevB: ''
}
```
然后,我们需要在每个下拉框的v-model中绑定A和B的值:
```
<select v-model="A">
...
</select>
<select v-model="B">
...
</select>
```
接下来,我们需要在确定和取消按钮的点击事件中进行处理。当点击确定按钮时,我们将B的值赋给prevB,并将B的值进行处理。当点击取消按钮时,我们将B的值清空,并将prevB的值重新赋给B。
```
methods: {
confirm: function() {
this.prevB = this.B;
// 处理B的值
},
cancel: function() {
this.B = '';
this.B = this.prevB;
}
}
```
以上是JS和Vue的代码实现,希望能够解决你的问题!