1. 条件分岐の制御方法
Vue.jsでは、テンプレート内で条件分岐を行うためにv-ifディレクティブを使用します。このディレクティブを使用することで、要素の表示や非表示を制御することができます。
単一の要素の条件分岐
単一の要素を条件に基づいて表示する場合は、次のようにv-ifディレクティブを使用します。
<template>
<div>
<p v-if="condition">条件が真の場合に表示される要素</p>
</div>
</template>
上記の例では、conditionが真の場合に<p>要素が表示されます。conditionが偽の場合は、<p>要素はレンダリングされません。
条件に応じた複数の要素の表示
複数の要素を条件に基づいて表示したい場合は、v-ifディレクティブを親要素に適用し、それぞれの要素にv-elseディレクティブを追加します。
<template>
<div v-if="condition1">
<p>条件1が真の場合に表示される要素</p>
</div>
<div v-else-if="condition2">
<p>条件2が真の場合に表示される要素</p>
</div>
<div v-else>
<p>条件1と条件2が偽の場合に表示される要素</p>
</div>
</template>
上記の例では、condition1が真の場合は最初の<div>要素内の要素が表示され、condition2が真の場合は2番目の<div>要素内の要素が表示されます。いずれの条件も偽の場合は、3番目の<div>要素内の要素が表示されます。
条件の組み合わせ
複数の条件を組み合わせて制御する場合は、v-ifと論理演算子（&&や||）を組み合わせることができます。
<template>
<div>
<p v-if="condition1 && condition2">条件1と条件2が両方真の場合に表示される要素</p>
<p v-else-if="condition3 || condition4">条件3または条件4が真の場合に表示される要素</p>
<p v-else>それ以外の場合に表示される要素</p>
</div>
</template>
上記の例では、condition1とcondition2が両方真の場合は最初の<p>要素が表示され、condition3またはcondition4が真の場合は2番目の<p>要素が表示されます。どの条件も満たさない場合は、3番目の<p>要素が表示されます。
これらの制御方法を使って、Vue.jsのテンプレート内で柔軟な条件分岐を実現することができます。
2. ループ処理の制御方法
Vue.jsでは、テンプレート内で繰り返し処理を行うためにv-forディレクティブを使用します。このディレクティブを使用することで、配列やオブジェクトの要素を反復処理し、動的な要素リストを生成することができます。
配列の反復処理
配列を反復処理する場合は、v-forディレクティブを使用します。以下の例では、itemsという配列の要素を反復処理して、リストの各アイテムを表示しています。
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
上記の例では、v-for="item in items"の部分で、itemという変数名を使用してitems配列の各要素を参照しています。key属性は一意の識別子を提供し、Vue.jsが要素の追加、変更、削除を正しくトラックできるようにします。
オブジェクトの反復処理
オブジェクトを反復処理する場合も、v-forディレクティブを使用します。以下の例では、userというオブジェクトのプロパティを反復処理して、キーと値を表示しています。
<template>
<div>
<ul>
<li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
</ul>
</div>
</template>
上記の例では、(value, key) in userの部分で、valueとkeyという変数名を使用してuserオブジェクトのプロパティを参照しています。key属性はここでも一意の識別子として使用されます。
インデックスの取得
反復処理中にインデックスを取得したい場合は、追加の引数をv-forディレクティブに追加することができます。
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="item.id">{{ index + 1 }}. {{ item.name }}</li>
</ul>
</div>
</template>
上記の例では、(item, index) in itemsの部分で、indexという変数名を使用して各要素のインデックスにアクセスしています。
これらの制御方法を使って、Vue.jsのテンプレート内で効果的なループ処理を実現することができます。