Vue.js:如何将2个不同的v-if用于同一个元素

Question

我只想v-if在同一个div中使用2个不同的,如下所示:

其实我有这个代码:

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

我希望有类似的东西:

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