uni-app点击盒子一按钮,成功后盒子一隐藏盒子2显示代码
时间: 2023-12-25 21:06:38 浏览: 132
您可以在uni-app中使用v-if或v-show指令来实现隐藏和显示元素。以下是实现您所需功能的代码示例:
```
<template>
<div>
<div v-show="showBox1">
<!-- 盒子1的内容 -->
<button @click="hideBox1ShowBox2">点击按钮</button>
</div>
<div v-show="showBox2">
<!-- 盒子2的内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
showBox1: true,
showBox2: false
}
},
methods: {
hideBox1ShowBox2() {
this.showBox1 = false;
this.showBox2 = true;
}
}
}
</script>
```
在上面的代码中,我们在data中定义了两个变量showBox1和showBox2,分别用于控制盒子1和盒子2的显示状态。在hideBox1ShowBox2方法中,我们将showBox1设置为false,将showBox2设置为true,从而实现了点击按钮后盒子1隐藏盒子2显示的效果。
阅读全文