プログラミング入門ナビ編集部

この記事では、Vue.jsで、オブジェクトの繰り返しを v-forディレクティブで行う方法について学習します。

この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

実現したいこと。

オブジェクトから、値を取り出して、てリスト表示。

Taro
Yamada
28

オブジェクトのkeyとvalueを、リスト表示。
Taro : firstName
Yamada : lastName
28 : age

v-for 構文

＜要素名 v-for=”バリュー in オブジェクト”＞
{{ 表示したいバリュー }}
＜/要素名＞

または、

＜要素名 v-for=”(バリュー, キー) in オブジェクト”＞
{{ 表示したいキー or バリュー }}
＜/要素名＞

構文は、このようになっていますが、実際にプログラムを書いて習得していきましょう。

実装

空のテンプレートをマウントしてある、状態からはじめます。

まず、表示に使うユーザーオブジェクトを用意します。

オブジェクト何か、初心者向けにざっくり説明すると、
オブジェクトとは、様々な特性（言い換えると、プロパティ）をもったもの
です。

例えばの事例として、ユーザーオブジェクトを作成するJavaScriptのコードはこのような感じです。

次に、dataオプションに、userという名前のobjectを用意します。
ファーストネーム、ラストネーム、年齢を定義します。

var app = new Vue({
  el: '#app',
  data: {
    user: {
      firstName: 'Taro',
      lastName: 'Yamada',
      age: 28
    }
  }
})

次に、template側でこのobjectを表示します。
まず、valueだけ表示してみます。

オブジェクトに格納されている値をリスト表示するために、v-for ディレクティブ使用しています。

• • {{ value }}

このように、objecetのvalueが表示されました。

Taro
Yamada
28

v-for ディレクティブは value in objectといった形式で、形式で繰り返しを実行できます。
繰り返しのたびに、オブジェクトのvalueをとりだして、出力しています。

このvalue には、user objectの、valueが繰り返しのたびに、1個づつ入ります。
繰り返しが進むごとに、valueに入る値が代わります。

このオブジェクトの名前は、dataオプションの、user プロパティで定義したものとそろえます。

次に、valueだけではなくて、objectの、keyも一緒に表示してみましょう。

つぎの様に記述してください。

• {{ key}} : {{ value }}

とします。

オブジェクトから、価を一つづつとりだして、　keyと、valueを1つずつ、表示していきます。
注意ですが、第一引数が、valueで、第二引数がkeyなので、間違えないようにしてしてください。

これで、keyとvalueを画面に表示することができました。

ちなみに、この変数名は、任意につけられるので、

• {{ k }} : {{ v }}

としても、同じ結果が得られます。

userの部分は、データプロパティで、指定した名前と揃えてください。

Vue.jsのv-forについて動画で学習する

おわりに

このレクチャーでは、オブジェクトの繰り返しの描画 v-forディレクティブ、について学習しました。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。¥2,600¥1,300 4.3 (3617 ratings)122 lectures, 5 hours

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

この記事では、条件分岐を行う v-showディレクティブについて学習します。

この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

v-showとは

v-showディレクティブは、要素を表示/非表示切り替帰ることができます。

v-ifのように、DOMから要素を追加/削除するのではなく、CSSのdisplay プロパティをON/OFFすることで、を切り替えることができます。

v-showを使ってみる

それでは、実際に使ってみましょう。
v-ifのレクチャーのコードのつづきです。
p要素を設置して、表示、非表示を切り替えることをやります。

v-ifとなっているところを、v-showに書き換えます。

var app = new Vue({
el: '#app',
data: {
toggle: false
}
})

toggleをfalseの時は、result欄に何も表示されてされません。
toggleをtrueに変えてみましょう。

プロパティがtoggleがtrueの時は、Helloと表示されています。

ここで、DOMツリーががどうなっているか観てみましょう。

Helloを選択して、右クリック、検証をクリックします。

Hello

このように、p要素が描画されています。

こここで、 toggle: falseにします。
右クリック ＞ 検証 として、 確認すると

p要素がCSSの、displayがnoneにより、非表示になっています。

v-ifディレクティブでは、条件を満たさなかった場合、要素はDOMレベルで削除されました。

それに対して、v-showでは、DOMからは削除されない点が特徴です。
CSSのdisplay プロパティを操作して、表示、非表示を切り替えます。

v-showのv-ifと比べたときのメリット

要素を頻繁に表示/非表示を繰り返す用途の場合、v-ifと比べて、描画コストを低く抑える観点で、有利です。

動画でv-showを学習する

サンプルコード

おわりに

この記事ではでは、条件分岐 v-showについて学習しました。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。¥2,600¥1,300 4.3 (3617 ratings)122 lectures, 5 hours

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する