Question

我想创建一个复杂的条件来传递给b * gy指令。

我尝试了以下内容。

v-if

我可以在Vue <div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" >中添加复杂条件吗？这不起作用。

我也试过了v-if，但那也没有用。我还没有在文档中找到任何相关内容。

Answer 1

首先，回答你的问题。

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

你可以将任意JavaScript表达式传递给Vue中的v-if指令，包括一个包含运算符||或&&的复杂布尔表达式。

您可以自行测试。例如，尝试使用以下模板。

<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 computed fields，这样你就可以更好地突出（通过Vue Devtools）在v-if表达式中使用的变量。我想这个顺序是数据字段，所以你可以像这样设置计算字段：

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-if表达式应如下所示：

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

Answer 4

v-if="(segmento != 4) && (segmento != 2) && (segmento != 8)"

对我来说像微风一样工作！

v-if内的复杂条件

4 个答案: