条件レンダリング
テンプレート構文に加えて、テンプレート・コンポーネントがテンプレートに含まれている。
テンプレートコンポーネントは、テンプレート専用に設計されたコンポーネントで、このタイプのコンポーネントはテンプレート内でのみ使用できます。
条件レンダリングは、特定の条件に基づいてコンポーネントに異なる内容を動的に挿入することを可能にします。以下は、コンポーネント内で条件レンダリングを使用する方法のデモ例です。
この例では、test-demoという名前のコンポーネントを作成しました。コンポーネントにはボタンが含まれており、ボタンをクリックすると count プロパティが増加します。x-if、x-else-if、x-else タグを使用して、条件付き描画のロジックを実現しました。
x-ifタグはvalue属性を受け入れ、条件を定義します。valueの値がtrueの場合、x-if内のコンテンツが表示されます。この例では、countが偶数の場合に赤いテキストが表示されます。x-else-ifタグもvalue属性を受け入れ、条件を定義します。前の条件がたされず、valueの値がtrueの場合、x-else-if内のコンテンツが表示されます。この例では、countが3の倍数の場合に青いテキストが表示されます。x-elseタグにはvalue属性は必要ありませんが、前の条件がどれも満たされない場合に内部のコンテンツが表示されます。この例では、countが偶数でも3の倍数でもない場合に緑色のテキストが表示されます。x-elseはx-ifの直後にも使用できます。
これによって、異なる条件に基づいて動的に異なるコンテンツをレンダリングし、柔軟なインタラクションと表示効果を実現することができます。