Vue.js: как использовать логические операторы?

Question

Я просто хотел бы использовать 2 разных v-if в одном и том же div, как показано ниже:

На самом деле у меня есть этот код:

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

Содержит только один v-if .

И я хотел бы использовать 2 или более v-if внутри одного и того же условия, например:

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

Но это дает мне много ошибок, и я просто хотел бы узнать, как правильно его использовать. Заранее спасибо:)

Answer 1

Вы можете использовать их в той же директиве v-if, например,

&& = Логический оператор AND

|| = Логический оператор OR

&& означает, что оба условия должны выполняться для показа div.

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

|| означает, что для показа div должно быть выполнено только одно из условий.

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