Vue.js 在vue中单击一次即可修改4个变量

我有4个按钮，需要加载一个组件。每次加载组件时，最后一个组件都必须离开

我有以下代码：

const showFoo=ref（false）
常量showMyBar=ref（假）
常量showMyBaz=ref（假）
const showMyPan=ref（假）

添加新的查找
我的桌子
我的名誉墙
我的博客
设置（）{




}

首先加载组件

<div>
    <div>
       <button @click="showFoo">add a new find</button>
       <button @click="showBar">my table</button>
       <button @click="showBaz">my wall of fame</button>
       <button @click="showPan">my blog</button>
    </div>
    <div v-if="showFoo"> < FooComponent /> </div>
    <div v-else-if="showBar"> < BarComponent /> </div>
    <div v-else-if="showBaz"> < BazComponent /> </div>
    <div v-else-if="showPan"> < PanComponent /> </div>
</div>

在方法上

hideFoo() {
   this.showFoo = false
   this.showBar = true
}

hideBar() {
   this.showBar = false
   this.showBaz = true
}

hideBaz() {
   this.showBaz = false
   this.showPan = true
}

hidePan() {
   this.showPan = false
   this.showFoo = true
}

---

showFoo（）

然后？@TJ ahh是的，我的坏XD哈哈哈。我正在做一些事情，我看到了这个。我现在要编辑它XDI刚刚意识到这里的代码编辑器用v_else-ifs替换了我的v-ifs…它给了我一个答案…-）

hideFoo() {
   this.showFoo = false
   this.showBar = true
}

hideBar() {
   this.showBar = false
   this.showBaz = true
}

hideBaz() {
   this.showBaz = false
   this.showPan = true
}

hidePan() {
   this.showPan = false
   this.showFoo = true
}