使用條件式轉譯

已完成

使用資料導向應用程式時，通常需要能夠根據特定值更新顯示。 您可能需要變更色彩以表示警告、停用無法使用的選項，或不顯示某個控制項。 Vue.js 提供數個指示詞來控制是否及如何顯示項目。

切換可見度

您可以使用 v-show 指示詞來控制要顯示的項目。 v-show 會檢查布林值或運算式，然後決定是否應該顯示元件。 如您所預期，true 表示將會顯示，而 false 表示將不會顯示。

下列範例顯示使用 v-show 搭配評估為 true 或 false 的運算式：

<div v-show="new Date().getMonth() < 3">It is the first quarter</div>

注意

您可以在任何指示詞中或在雙括弧 ({{ }}) 內使用有效的 JavaScript。

布林邏輯

針對實作布林值邏輯，Vue.js 支援三個指示詞：v-if、v-else-if 和 v-else。 如您所預期，這些指示詞都完全符合傳統的 if、else if 和 else 陳述式。

<div v-if="new Date().getMonth() < 3">It is the first quarter</div>
<div v-else-if="new Date().getMonth() < 6">It is the second quarter</div>
<div v-else-if="new Date().getMonth() < 9">It is the third quarter</div>
<div v-else>It is the fourth quarter</div>

前述範例的運作方式是因為 if 指示詞的行為與 JavaScript 中的 if 區塊相同。 當偵測到 true 值時，就會結束區塊。 因此，如果傳回的月份 2 代表三月 (從 0 開始計算行事曆月份)，它會在第一行測試為 true，並略過接下來三個的評估。