【Vue.js】同一のタグでv-forとv-ifを使いたいときの方法

Vue.jsにはループさせたいときに使うv-forと条件分岐させたいときに使うv-ifがあります。

この二つはよく使う処理だと思います。

たまにv-forとv-ifを併用して使いたいときがあると思います。

ですがv-forとv-ifは同じタグで使うのは推奨されていません。

理由としてはv-forは v-if よりも優先度が高くなってしまうので書き方によってはv-forが繰り替え処理されてしまいパフォーマンス的にも悪くなるといったことが挙げられます。

v-ifとv-for両方を使いたいとき

データを準備

まずはデータを準備しましょう。

お店の店舗名、エリアがある情報とお店があるエリアの情報のみを用意しました。

var list = {
    area: [
         {id: 'tokyo', area: '東京',},
         {id: 'saitama', area: '埼玉',},
         {id: 'kanagawa', area: '神奈川',},
         {id: 'osaka', area: '大阪',},
        ],     
    shops: [
         {id: '0001', area: '東京', shop: '東京支店',},
         {id: '0002', area: '東京', shop: '渋谷支店',},
         {id: '0003', area: '東京', shop: '新宿支店',},               
         {id: '0004', area: '埼玉', shop: '埼玉支店',},
         {id: '0005', area: '神奈川', shop: '神奈川支店',},
         {id: '0006', area: '大阪', shop: '大阪支店',},
        ]
};

インスタンスの生成

次はインスタンスの生成を行います。

dataにはそれぞれエリアとショップを定義します。

new Vue({
	el: '#app',
	data: {
		area: list.area,
		shop: list.shops,                     
	},
});

v-forの書き方

おさらいになりますが下記は、v-forの処理を行うときの書き方になります。

下記の例だとareaにあるarea名をループして表示させるものなります。

<ul>
       <template v-for="area in area">
              <li>{{area.area}}</li>
       </template>
</ul>

v-ifとv-forを使った例

次はv-forとv-ifを使った書き方になります。

shopにあるデータの中からareaに東京が含まれているもの表示させる処理になります。

<ul>
	<template v-for="shop in shop">
		<li v-if="shop.area == '東京'">{{shop.shop}}</li>
	</template>
</ul>

またv-forとv-ifを使うときにタグが増えてしまうこともあると思います。

タグを無駄に増やしたくないときそんなときは上記のようにtemplateタグを使うようにすると良いと思います。

サンプル

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。