I would simply like to use 2 different v-if
into the same div, as the following:
Actually I have this code:
JavaScript
x
4
1
<div class="o-overlay" v-if="show">
2
<div class="o-overlay__bg" @click="hide"></div>
3
</div>
4
Containing only one v-if.
And I would like to use 2 or more v-if inside the same condition, like for instance:
JavaScript
1
4
1
<div class="o-overlay" v-if="show" v-if="visible">
2
<div class="o-overlay__bg" @click="hide"></div>
3
</div>
4
But it give me a lot of error and I would simply like to learn the correct way to use it. Thank you in advance 🙂
Advertisement
Answer
You could use them in the same v-if
directive e.g.
&&
= Logical Operator AND
||
= Logical Operator OR
&&
means both conditions have to be true for the div to show.
JavaScript
1
4
1
<div class="o-overlay" v-if="show && visible">
2
<div class="o-overlay__bg" @click="hide"></div>
3
</div>
4
||
means only one of the conditions have to be true for the div to show.
JavaScript
1
4
1
<div class="o-overlay" v-if="show || visible">
2
<div class="o-overlay__bg" @click="hide"></div>
3
</div>
4