Vue.js：如何在模板中使用逻辑运算符？答案

【问题标题】：Vue.js: how to use the logical Operators in a template?Vue.js：如何在模板中使用逻辑运算符？
【发布时间】：2019-06-02 06:21:05
【问题描述】：

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

其实我有这个代码：

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

但它给了我很多错误，我只是想学习使用它的正确方法。提前谢谢你:)

【问题讨论】：

您可以执行show || visible，如果其中一个为真，该项目将显示或show && visible，您将仅在两者都为真时显示。
add-more-than-one-v-if-with-different-conditions-for-one-div-without-duplicate的可能重复
VueJS Multiple Condition v-if的可能重复

【解决方案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>

【讨论】：