このVueJSのコードを簡略化するには

配列インデックスを使用せずに配列から複数のデータを表示したいが、li &テーブルを使わずに同じフォーマットでデータを毎回自動的に表示したい。このVueJSのコードを簡略化するには

マイコード：今、私は、配列の値をプリントアウトするために、配列のインデックスを使用しています

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <title>VueJS</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t \t <div class="root"> 
 
\t \t \t <center> 
 
\t \t \t <h1> {{names[0]}} </h1> <p> By <b>{{authors[0]}}</b> </p> 
 
\t \t \t <p><b>{{dates[0]}}</b> in <b>{{language}}</b></p><hr> 
 
\t \t \t <h1> {{names[1]}} </h1> <p> By <b>{{authors[1]}}</b> </p> 
 
\t \t \t <p><b>{{dates[1]}}</b> in <b>{{language}}</b></p><hr> 
 
\t \t \t <p>Update Any Changes You Want.</p> 
 
\t \t \t <input type="text" id="text" v-model="names[0]"></input> 
 
\t \t \t <input type="text" id="text" v-model="authors[0]"></input> 
 
\t \t \t <input type="text" id="text" v-model="dates[0]"></input> 
 
\t \t \t <input type="text" id="text" v-model="language"></input> </br> </br> 
 
\t \t \t <input type="text" id="text" v-model="names[1]"></input> 
 
\t \t \t <input type="text" id="text" v-model="authors[1]"></input> 
 
\t \t \t <input type="text" id="text" v-model="dates[1]"></input> 
 
\t \t \t <input type="text" id="text" v-model="language"></input></center><hr> 
 
\t \t </div> 
 
\t 
 
\t 
 
\t <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 
\t 
 
\t <script> 
 

 
\t \t new Vue ({ 
 
\t \t \t el: '.root', 
 
\t \t \t data: book = 
 
\t \t \t { 
 
\t \t \t \t names: ['Hamlet', 'A Boys Will'], 
 
\t \t \t \t authors: ['William Shakespeare', 'Robert Frost'], 
 
\t \t \t \t dates: ['1609', '1913'], 
 
\t \t \t \t language: 'English' 
 
\t \t \t } 
 
\t \t }) 
 
\t </script> 
 
\t </body> 
 
</html>

。複数の値を表示する最も簡単な方法は何ですか？

ありがとうございました。

出典

2017-10-12 Anonymous

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
    <title>VueJS</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t \t <div id="root"> 
 
\t \t \t <div class="text-center" v-for="book in books"> 
 
\t \t \t <h1> {{ book.name }} </h1> 
 
     <p> By <b>{{ book.author }}</b> </p> 
 
     <p><b>{{ book.date }}</b> in <b>{{ book.language }}</b></p> 
 
     <input type="text" v-model="book.name"> 
 
     <input type="text" v-model="book.author"> 
 
     <input type="text" v-model="book.date"> 
 
     <input type="text" v-model="book.language"> 
 
     <hr> 
 
\t \t \t </div> 
 
     <p>Update Any Changes You Want.</p> 
 
    </div> 
 
\t 
 
\t 
 
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 

 
    <script> 
 

 
     new Vue({ 
 
     el:'#root', 
 
     data: { 
 
      books: [ 
 
      { 
 
       name: 'Hamlet', 
 
       author: 'William Shakespeare', 
 
       date: '1609', 
 
       language: 'English' 
 
      }, 
 
      { 
 
       name: 'A Boys Will', 
 
       author: 'Robert Frost', 
 
       date: '1913', 
 
       language: 'English' 
 
      } 
 
      ] 
 
     } 
 
     }) 
 
\t </script> 
 
\t </body> 
 
</html>

あなたが好きなように、リストや表だけではないが、配列アイテムやオブジェクトを反復するためにテンプレート内の「V-のための」イテレータを使用することができます。クラスの代わりに '#root'のようなルート要素のIDを使用することをお勧めします。

私はこれらの種類の反復のためのjavascriptオブジェクト形式に慣れているので、私はあなたの配列をjavascriptオブジェクトに変換しました。

さらに、Vueの公式ドキュメントから確認できます。 https://vuejs.org/v2/guide/list.html

出典

2017-10-12 21:02:11

大変ありがとうございました！ –

このVueJSのコードを簡略化するには

答えて

関連する問題