v-if内部的复杂条件

vue.js Vue.js

西门达蒙Davaid

2020-03-13

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

我尝试了以下方法。

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

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

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

第1409篇《v-if内部的复杂条件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
伽罗Tony小卤蛋 2020.03.13

是的，您可以在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>
猿Near 2020.03.13 
v-if="(segmento != 4) && (segmento != 2) && (segmento != 8)"

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

番长神奇 2020.03.13

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

前端LEY米亚 2020.03.13

首先，回答您的问题。

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

您的表情看起来不错，但是根据提供的信息，您不可能推断出确切的错误所在。

您的问题是另外一回事：也许数据的格式不符合您的预期，或者您的逻辑存在缺陷。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android