v中的复杂条件 - 如果

Question

我想创建一个复杂的条件传递给v-if指令。

我试过以下。

<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" > 

我可以在Vue的v-if中添加复杂的条件吗？这不起作用。

我也试过&&，但那也没用。我没有在文档中找到任何关于此的信息。

Answer 1

首先，回答你的问题。

我可以在Vue的v-if中添加复杂的条件吗？

您可以通过任意的JavaScript表达式到v-if指令中的Vue，包括其中包含运营商||或&&一个复杂的布尔表达式。

你可以自己测试一下。例如，尝试使用以下模板。

<div v-if="true && false">I am not visible!</div> 

当然，你可以尝试的东西少琐碎，太：

<div v-if="1 == 2 || (1 + 2 == 3 && 4 == 4)">I am visible!</div> 

---

你的表情看起来不错，但根据所提供的信息是不可能的推断究竟是什么错。

你的问题是别的：也许数据不是你认为的格式，或者你的逻辑有缺陷。

Answer 2

是的，你可以设置复杂的条件。我建议你使用Vue计算字段，所以你最好在v-if表达式中使用变量（通过Vue Devtools）。我想，为了是数据字段，这样你就可以设置计算领域是这样的：

computed: { 
    orderStatusId: function() { 
     // Write some checks is variable defined/undefined 
     return this.order.order_products[key].statuses[0].id 
    }, 
    orderStatus: function() { 
     return this.order.status 
    } 
} 

和V-如果表达式应该是这样的：

<div v-if="orderStatusId !== 3 || orderStatus !== 3" > 

在这种方法中，你可以查看变量的值在你的v-if表达式中。

Answer 3

是的，您可以在v-if引号内使用任何JavaScript表达式。 但我建议您创建一个函数或计算函数，并在您的if语句中调用它，以获得更好的可读性。

例如：

computed: { 
    shouldDisplay: function() { 
    return this.order.order_products[key].statuses[0].id) !== 3 || this.order.status !== 3; 
    } 
    ... 
} 

<div v-if="shouldDisplay"> ... </div>