如果用ifelse判断呢
时间: 2023-07-27 10:14:30 浏览: 42
如果您想使用 if-else 语句来判断按钮点击哪个弹框,可以使用以下代码作为参考:
HTML 代码:
```
<template>
<view>
<button @click="showModal(1)">弹框1</button>
<button @click="showModal(2)">弹框2</button>
<view v-if="modalData.show1" class="modal" @click="hideModal(1)">弹框1的内容</view>
<view v-else-if="modalData.show2" class="modal" @click="hideModal(2)">弹框2的内容</view>
</view>
</template>
```
JavaScript 代码:
```
<script>
export default {
data() {
return {
modalData: {
show1: false,
show2: false
}
}
},
methods: {
showModal(modalNum) {
if (modalNum === 1) {
this.modalData.show1 = true;
} else {
this.modalData.show2 = true;
}
},
hideModal(modalNum) {
if (modalNum === 1) {
this.modalData.show1 = false;
} else {
this.modalData.show2 = false;
}
}
}
}
</script>
```
在上面的代码中,我们使用了一个 `modalData` 对象来存储弹框的显示状态。在 `showModal` 方法中,我们使用 if-else 语句判断当前被点击的按钮是哪个,根据不同情况设置对应的弹框显示状态为 `true`。在 `hideModal` 方法中同样使用 if-else 语句判断当前关闭的是哪个弹框,根据不同情况设置对应的弹框显示状态为 `false`。在模板中,我们使用 `v-if` 和 `v-else-if` 条件渲染来判断哪个弹框应该显示,哪个应该隐藏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)