2.1.10Vue.jsは、複数のデータが納められた配列から値を取り出して、HTMLドキュメントに動的にリストとして加えることができます。かたちの決まった複数のデータが、簡単に扱えるのです。データから動的にリストをつくる」に改訂しました。要素のclass属性を動的に変える」でつくったコード002に手を加えてゆきましょう。今は、入力フィールドに書いたテキストがひとつの項目としてページに示され、チェックボックスでスタイルが変わります(図001)。図001■入力フィールドのテキストがページの項目に示される項目のデータを複数にします。Vue()コンストラクタに渡す引数オブジェクトのプロパティdataに、つぎのように新たな配列のプロパティ(todos)を定めて、複数のデータを納めます。false},]}});配列からデータを取り出して要素として差し込むのがv-forディレクティブです。データ配列"という構文で、配列から変数にデータをひとつずつ取り出します。子ノードの要素が、ページに差し込むテンプレートになります。テキスト入力フィールドのバインディングを改めるテキスト入力フィールドの<input>要素(type属性"text")にバインドしていたプロパティ(todo)はなくなってしまいました。v-modelディレクティブに与えるプロパティをつぎのように書き替えましょう。配列(todos)の初めのデータと入力フィールドのテキストがバインドされます。/></p></div>これで複数のデータからそれぞれの項目の要素がつくられて、ページにリストされます(図002)。<body>要素の記述は、以下のコード002にまとめました。併せて、コードを試すためのサンプル001もその下に掲げてあります。