Vue.js: how to use the logical Operators in a template?

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 🙂

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.

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