条件付きレンダリングを使用する
データ ドリブン アプリケーションを使用する場合、通常、特定の値に基づいて表示を更新できる必要があります。 たとえば、警告を示すために色を変更したり、使用できないオプションの非アクティブにしたりする必要があります。また、コントロールを表示しないようにすることが必要になる場合もあります。 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>
Note
有効な JavaScript を任意のディレクティブまたは二重中かっこ ({{ }}) 内で使用できます。
ブール論理
Vue.js では、ブール論理を実装するために、3 つのディレクティブ (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 値が検出されると、このブロックは終了します。 このため、返される月が、3 月を表す 2 (カレンダー月のカウントは 0 から始まります) である場合、最初の行で true としてテストされ、次の 3 つの評価をスキップします。