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

Posted 2023-02-23

【中文标题】Vue.js：如何在模板中使用逻辑运算符？

【英文标题】：Vue.js: how to use the logical Operators in a template?

【发布时间】：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>

【讨论】：

@Ced 在此处了解更多信息meta.stackexchange.com/questions/126829/…