v-if内的复杂条件

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-ifVue中的指令,包括包含运算符||或的复杂布尔表达式&&.

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

<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计算字段,这样你就可以更好地突出显示(通过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表达式中的变量值.