首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue.js:如何在模板中使用逻辑运算符?

Vue.js:如何在模板中使用逻辑运算符?
EN

Stack Overflow用户
提问于 2019-01-07 23:05:15
回答 1查看 9.6K关注 0票数 1

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

实际上我有这样的代码:

代码语言:javascript
复制
<div class="o-overlay" v-if="show">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

只包含一个v-if

我想在相同的条件下使用2个或更多的v-if,比如:

代码语言:javascript
复制
<div class="o-overlay" v-if="show" v-if="visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-07 23:09:48

您可以在同一个v-if指令中使用它们,例如

&& =逻辑运算符AND

|| =逻辑运算符OR

&&意味着两个条件都必须为真,才能显示div。

代码语言:javascript
复制
<div class="o-overlay" v-if="show && visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>

||意味着只有一个条件必须为真,才能显示div。

代码语言:javascript
复制
<div class="o-overlay" v-if="show || visible">
    <div class="o-overlay__bg" @click="hide"></div>
</div>
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54076874

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档