v中的複雜條件 - 如果

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

---

你的表情看起來不錯，但根據所提供的信息是不可能的推斷究竟是什麼錯。

你的問題是別的：也許數據不是你認爲的格式，或者你的邏輯有缺陷。

Answer 2

是的，你可以設置複雜的條件。我建議你使用Vue計算字段，所以你最好在v-if表達式中使用變量（通過Vue Devtools）。我想，爲了是數據字段，這樣你就可以設置計算領域是這樣的：

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-如果表達式應該是這樣的：

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

在這種方法中，你可以查看變量的值在你的v-if表達式中。

Answer 3

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