0

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

谢谢你。

4

2 回答 2

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>
于 2020-05-24T18:57:08.857 回答
0 
<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。

于 2021-08-24T07:24:38.280 回答