v-if 中的一个复杂条件答案

【问题标题】：A complex condition inside v-ifv-if 中的一个复杂条件
【发布时间】：2017-08-27 15:39:15
【问题描述】：

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

我已经尝试了以下方法。

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

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

我也尝试过使用&&，但这也不起作用。我在文档中没有找到任何关于此的内容。

【问题讨论】：

标签： vue.js

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

您的表情看起来不错，但根据提供的信息，无法推断出究竟是什么问题。

您的问题是其他问题：可能数据不是您认为的格式，或者您的逻辑可能存在缺陷。

【讨论】：

【解决方案2】：

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

对我来说就像轻而易举！

【讨论】：

【解决方案3】：

是的，您可以设置复杂的条件。我建议您使用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 表达式中的变量值。

【讨论】：

【解决方案4】：

是的，您可以在 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>

【讨论】：