I would simply like to use 2 different v-if into the same div, as the following:

Actually I have this code:

<div class="o-overlay" v-if="show">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

Containing only one v-if.

And I would like to use 2 or more v-if inside the same condition, like for instance:

<div class="o-overlay" v-if="show" v-if="visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

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 :)

I would simply like to use 2 different v-if into the same div, as the following:

Actually I have this code:

<div class="o-overlay" v-if="show">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

Containing only one v-if.

And I would like to use 2 or more v-if inside the same condition, like for instance:

<div class="o-overlay" v-if="show" v-if="visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

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 :)

• javascript
• html
• vue.js
• vuejs2
• vue-component

• 1 You can do show || visible which the item will show if either are true or show && visible where you will only show if both are true. – user5283119 Commented Jan 7, 2019 at 15:10
• Possible duplicate of add-more-than-one-v-if-with-different-conditions-for-one-div-without-duplicate – Moumen Soliman Commented Jan 7, 2019 at 15:43
• Possible duplicate of VueJS Multiple Condition v-if – user5283119 Commented Jan 7, 2019 at 15:44

1 Answer 1

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.

<div class="o-overlay" v-if="show && visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

|| means only one of the conditions have to be true for the div to show.

<div class="o-overlay" v-if="show || visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>