Vue.js：如何在同一个元素中使用2个不同的v-if

Question

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

实际上我有以下代码：

<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

您可以在相同的COUNT(CASE ... THEN 1 END)指令中使用它们，例如

SUM(CASE ... THEN status END) =逻辑运算符v-if

&& =逻辑运算符AND

||意味着要显示div，两个条件都必须为真。

OR

&&意味着div只需显示一个条件即可。

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