Vue.js v-if中的一个复杂条件

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

我试过以下方法

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

我可以在Vue的v-if中添加复杂条件吗？这是行不通的

---

我也试过使用&&但也不起作用。我在文档中没有找到任何与此相关的信息。

首先，回答您的问题

我可以在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>

你的表情看起来不错，但根据提供的信息，不可能推断出到底是什么错了

---

您的问题在于：可能数据的格式与您认为的不一样，或者您的逻辑有缺陷。

是的，您可以设置复杂条件。我建议您使用，这样您就可以通过Vue开发工具更好地突出显示在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
    }
}

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

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

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

---

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

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

例：

对我来说工作轻松