Hide-Show N divs with Vuejs 和 @click [初学者]

Question

我对如何根据点击隐藏和显示 3 个div 感到困惑。

我已经能够使用 v-show 显示和隐藏 2 个div，但 v-show 不适用于我认为超过 2 个div。

这是我没有 vuejs 的代码，因为我不明白如何使用 v-else-if 渲染

<div id="element_one">
ONE
<a>Go to two</a>
<a>Go to three</a>
Some content
</div>
<div id="element_two>
<a>Go back to one</a>
Some content
</div>
<div id="element_three>
<a>Go back to one</a>
Some content
</div>

应用程序.js可以这样吗？

new Vue({
el: '#app',
data: {
isOne: true,
isTwo: true,
isThree: true
}
});

对不起，我明白这是一个基本问题，但如果你能指导我。 我在文档中看到了有关 v-else-if 的内容，但我仍然不清楚如何应用它。 我知道每个div都对其应用显示"无"，当它被激活时，它会消失。

所以基本上是，当我通过其相应按钮访问的div 被激活时，两个div 没有显示。

谢谢。

Answer 1

for using v if directive
<p v-if="inStock">{{product}}</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
and so on and the last is what`s below
<p v-else>..</>
you can also use v-show(note this toggles css property display:none)
<p v-show="showProductDetails">..</p>

Answer 2

<div id="element_one" v-if="visibleDivId == 1">
ONE
<a @click="showDivById(2)">Go to two</a>
<a @click="showDivById(3)>Go to three</a>
Some content
</div>
<div id="element_two v-if="visibleDivId == 2">
<a @click="showDivById(1)">Go back to one</a>
Some content
</div>
<div id="element_three v-if="visibleDivId == 3">
<a @click="showDivById(1)">Go back to one</a>
Some content
</div>
new Vue({ 
el: '#app', 
data: {
visibleDivId: 1,  
},
methods: {
showDivById(divId) {
this.visibleDivId = divId
}
}
});

您可以编写一个函数并使用它来在单击时显示或隐藏div。