v-ifディレクティブやv-forディレクティブは、単一の要素に対して指定する必要があります。
例えば、v-ifディレクティブを使用して要素の表示・非表示を切り替える場合は、以下のようになります。
HTML
|
1 2 3 4 5 |
<div id="app"> <h1 v-if="isShow">見出し</h1> <p v-if="isShow">段落1</p> <p v-if="isShow">段落2</p> </div> |
JavaScript
|
1 2 3 4 5 6 7 |
Vue.createApp({ data: function() { return { isShow: true } } }).mount('#app') |
上記のコードでは、dataオプションに定義したisShowプロパティの値で、h1要素とp要素の表示有無を切り替えています。
ここでは、表示状態を切り替えたい要素が複数（h1要素1つとp要素2つ）ありますので、それぞれの要素にv-ifディレクティブを指定していますが、この方法では表示状態を切り替えたい要素が多い場合にすべての要素に対してv-ifディレクティブを記述しなければなりません。
このような場合にVue.jsでは複数の要素をグループ化するためにtemplate要素を使用します。
今回の記事では、template要素を使用して複数の要素をグループ化し、v-ifディレクティブやv-forディレクティブを適用する方法を紹介します。
template要素で複数の要素をグループ化する
template要素を使用して複数の要素をグループ化するには、以下のようにtemplate要素内に複数の要素を配置します。
|
1 2 3 4 5 |
<template> <h1>見出し</h1> <p>段落1</p> <p>段落2</p> </template> |
template要素でのv-ifディレクティブによる条件グループ
template要素を使用してグループ化した要素にv-ifディレクティブを適用する例を以下に示します。
|
1 2 3 4 5 |
<template v-if="visible"> <h1>見出し</h1> <p>段落1</p> <p>段落2</p> </template> |
template要素内に複数の要素を配置し、v-ifディレクティブをtemplate要素に適用することで、template要素内の要素の表示・非表示を切り替えることができます。
上記の例では、見出しのh1要素と段落のp要素を1つのグループとして、表示状態を切り替えます。
template要素でのv-forディレクティブによる条件グループ
template要素を使用してグループ化した要素にv-forディレクティブを適用する例を以下に示します。
|
1 2 3 4 5 6 |
<ul> <template v-for="item in items"> <li>{{item.contents}}</li> <li class="divider" role="presentation"></li> </template> </ul> |
template要素内に複数の要素を配置し、v-forディレクティブをtemplate要素に適用することで、template要素内の要素の繰り返し出力することができます。
上記の例では、データを出力するli要素と、仕切り（装飾用）のli要素をセットで出力します。
