使用 Vuejs 和 @click [beginner] 隐藏显示 N 个 div答案

【问题标题】：Hide-Show N divs with Vuejs and @click [beginner]使用 Vuejs 和 @click [beginner] 隐藏显示 N 个 div
【发布时间】：2020-09-10 09:28:40
【问题描述】：

我对如何根据点击隐藏和显示 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>

app.js 可以这样吗？

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

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

基本上就是这样，当我通过相应按钮访问的 div 被激活时，两个 div 不显示。

谢谢。

【问题讨论】：

你能用 vue.js 分享你的代码吗？
我没有，因为我不知道如何开始，抱歉 :( 我只是假设，但我不清楚
可以在vue中查看条件渲染
是的，但是在示例中它是非常基本的，例如当您在两个 div 之间切换时，这就是为什么我怀疑是否有人可以指导我或解释 v-else-if、按钮和更改会发生什么3个div之间。谢谢！
我认为没有 v-else-if 选项。您可以对具有适当条件的所有 div 使用 v-if。

标签： vue.js vuejs2 vue-render-function

【解决方案1】：

<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。

【讨论】：

【解决方案2】：

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>

【讨论】：