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のテンプレート内で効果的なループ処理を実現することができます。