我想创建一个复杂的条件以传递给v-if
指令。
我尝试了以下方法。
<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" >
我可以在Vue中添加复杂条件v-if
吗?这是行不通的。
我也尝试过,&&
但是也没有用。我没有在文档中找到关于此的任何内容。
我想创建一个复杂的条件以传递给v-if
指令。
我尝试了以下方法。
<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" >
我可以在Vue中添加复杂条件v-if
吗?这是行不通的。
我也尝试过,&&
但是也没有用。我没有在文档中找到关于此的任何内容。
v-if="(segmento != 4) && (segmento != 2) && (segmento != 8)"
对我来说像微风一样工作!
是的,您可以设置复杂条件。我建议您使用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表达式中的变量值。
首先,回答您的问题。
我可以在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>
您的表情看起来不错,但是根据提供的信息,您不可能推断出确切的错误所在。
您的问题是另外一回事:也许数据的格式不符合您的预期,或者您的逻辑存在缺陷。
是的,您可以在v-if引号内使用任何JavaScript表达式。但是我建议您创建一个函数或计算函数,并在if语句中调用它,以提高可读性。
例如: