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

Question

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

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. — , Jan 07 '19 at 15:10
Possible duplicate of [add-more-than-one-v-if-with-different-conditions-for-one-div-without-duplicate](https://stackoverflow.com/questions/53594222/add-more-than-one-v-if-with-different-conditions-for-one-div-without-duplicate) — Moumen Soliman, Jan 07 '19 at 15:43
Possible duplicate of [VueJS Multiple Condition v-if](https://stackoverflow.com/questions/47515308/vuejs-multiple-condition-v-if) — , Jan 07 '19 at 15:44

score 16 · Accepted Answer · edited Jan 08 '19 at 09:35

16

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>

edited Jan 08 '19 at 09:35

Ced

answered Jan 07 '19 at 15:09

Boussadjra Brahim

1

@Ced learn more about that here https://meta.stackexchange.com/questions/126829/what-is-serial-voting-and-how-does-it-affect-me – Boussadjra Brahim Jun 18 '19 at 21:27

1 Answers1