Vue.js 条件付きレンダリング

Vue.js の条件付きレンダリングを使用すると、特定の条件に基づいて要素を動的に表示または非表示にすることができます。この機能は、レスポンシブでインタラクティブなユーザー インターフェイスを作成するために不可欠です。Vue.js には、条件付きレンダリングを処理するためのいくつかのディレクティブが用意されており、アプリケーション内の要素の可視性を効率的に管理できます。

v-if ディレクティブ

v-if ディレクティブは、式の真偽に基づいて要素を条件付きでレンダリングするために使用されます。式が true と評価された場合、要素はレンダリングされます。それ以外の場合は、DOM に含まれません。以下に基本的な例を示します。

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

この例では、段落要素は isVisible が true の場合にのみレンダリングされます。ボタンをクリックすると、isVisible の値が切り替わり、段落の表示が制御されます。

v-else ディレクティブ

v-else ディレクティブは、v-if と組み合わせて使用​​して、v-if 条件が false の場合に表示する代替コンテンツ ブロックを指定できます。次に例を示します。

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

この例では、isVisible が true の場合、最初の段落が表示されます。isVisible が false の場合、代わりに 2 番目の段落が表示されます。

v-show ディレクティブ

v-show ディレクティブでも条件付きで要素をレンダリングできますが、DOM から要素を追加または削除するのではなく、CSS display プロパティを使用して要素の可視性を切り替えるという点で v-if とは異なります。要素の可視性を頻繁に切り替える必要がある場合は、この方法の方が効率的です。

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

この例では、v-show ディレクティブは、display プロパティを設定することで段落の可視性を制御します。要素は DOM 内に残りますが、isVisible 値に基づいて非表示または表示されます。

v-else-if ディレクティブ

v-else-if ディレクティブは、条件付きレンダリング ロジックに "else if" チェーンを作成するために使用されます。これにより、先行する v-if 条件が満たされない場合に評価する追加の条件を指定できます。次に例を示します。

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

この例では、表示されるコンテンツは status プロパティの値によって異なります。 v-if、v-else-if、および v-else ディレクティブは、さまざまな状態を処理するために使用されます。

結論

条件付きレンダリングは、Vue.js でインタラクティブで動的なアプリケーションを開発する上で重要な要素です。v-if、v-else、v-show、v-else-if などのディレクティブを使用すると、さまざまな条件に基づいて要素の表示を制御できます。これらのディレクティブを習得すると、Vue.js アプリケーションでより応答性が高く、ユーザーフレンドリーなインターフェイスを作成するのに役立ちます。