v-forディレクティブで行う方法について学習します。導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。動画でプログラミング入門をしよう実現したいこと。オブジェクトから、値を取り出して、てリスト表示。TaroYamada28オブジェクトのkeyとvalueを、リスト表示。}}</要素名>構文は、このようになっていますが、実際にプログラムを書いて習得していきましょう。空のテンプレートをマウントしてある、状態からはじめます。表示に使うユーザーオブジェクトを用意します。オブジェクト何か、初心者向けにざっくり説明すると、オブジェクトとは、様々な特性(言い換えると、プロパティ)をもったものです。事例として、ユーザーオブジェクトを作成するJavaScriptのコードはこのような感じです。}</script>次に、dataオプションに、userという名前のobjectを用意します。ファーストネーム、ラストネーム、年齢を定義します。}})次に、template側でこのobjectを表示します。valueだけ表示してみます。ディレクティブ使用しています。</ol></div>このように、objecetのvalueが表示されました。objectといった形式で、形式で繰り返しを実行できます。繰り返しのたびに、オブジェクトのvalueをとりだして、出力しています。objectの、valueが繰り返しのたびに、1個づつ入ります。繰り返しが進むごとに、valueに入る値が代わります。プロパティで定義したものとそろえます。次に、valueだけではなくて、objectの、keyも一緒に表示してみましょう。つぎの様に記述してください。</ol></div>とします。keyと、valueを1つずつ、表示していきます。注意ですが、第一引数が、valueで、第二引数がkeyなので、間違えないようにしてしてください。これで、keyとvalueを画面に表示することができました。ちなみに、この変数名は、任意につけられるので、つぎの様に記述してください。</ol></div>としても、同じ結果が得られます。userの部分は、データプロパティで、指定した名前と揃えてください。v-forディレクティブ、について学習しました。Vue.js!高度化するWeb開発のフロントエンド開発の課題を解決。・About・プライバシーポリシ。