Vue.jsを使用した条件付きディレクティブ

条件に基づいて要素を表示または非表示にする機能は、フロントエンドフレームワークの基本的な機能です。 Vue.jsは、この効果を実現するための一連のコアディレクティブを提供します： v-if 、 v-else 、 v-else-if 、[X128X ]v-show。

Vue.js Hello World アプリケーションの使用を開始した後、JavaScriptデータオブジェクトの値を使用して、ビューを条件付きで制御できます。たとえば、以下に示す単純なデータオブジェクトの使用方法を示します。

data() {
  return {
    msg: "Hello World!",
    isLoggedIn: false
  }
}

v-if

v-if ディレクティブは、指定された式に基づいてDOM要素を追加または削除します。

データモデルのisLoggedInプロパティを使用して、ビューにログインボタンを表示できます。

<button v-if="isLoggedIn">Logout</button>

isLoggedInがfalseに設定されているため、ボタンは表示されなくなります。 data.isLoggedIn値をtrueに設定すると、ボタンがDOMに追加されます。

v-if ディレクティブは、1つの要素（およびその子要素）のみを表示または非表示にできますが、単一のv-ifで複数の要素を制御して重複を減らすこともできます。

これを行うには、この条件によって制御される必要があるすべての要素を次のようにラップする必要があります。エレメント。テンプレート要素自体はDOMに追加されません。ただし、 v-if 式に応じて、含まれているすべての要素が追加または削除されます。

たとえば、isLoggedInがtrue のときにラベルとボタンを表示する必要がある場合は、次のように両方の要素を1つのtemplate要素にラップできます。

<template v-if="isLoggedIn">
  <label> Logout </button>
  <button> Logout </button>
</template>

v-else という名前が示すように、このディレクティブは、v-ifに隣接する式がfalseに解決される場合にのみコンテンツを表示するために使用されます。

ログインボタンを使用して、isLoggedInがfalseの場合に自動的に表示することができます。

<button v-if="isLoggedIn"> Logout </button>
<button v-else> Log In </button>

v-elseに値を渡す必要はありません。ただし、v-ifまたはv-else-ifディレクティブを含む要素の直後にある要素に含まれている必要があります。

v-else-if は、3つ以上のオプションをチェックする必要がある場合に使用できます。これにより、else-ifチェーン内のチェーンされたアイテムの1つだけが表示されるようになります。

たとえば、isLoginDisabledという名前のプロパティがtrueの場合、ログインボタンが表示されないようにして、代わりにラベルを表示できます。次のようにv-else-ifディレクティブを使用してこれを実現できます。

<button v-if="isLoggedIn"> Logout </button>
<label v-else-if="isLoginDisabled"> Register disabled </label>
<button v-else> Log In </button>

v-if と非常によく似ており、 v-show ディレクティブを使用して、式に基づいて要素を表示および非表示にすることもできます。

2つの主な違いは、

通常、 v-show は、要素のオンとオフを頻繁に切り替える場合にパフォーマンス上の利点がありますが、 v-if には、初期レンダリング時間に関しては利点があります。