So vereinfachen Sie diesen Code von VueJS

Ich möchte mehrere Daten aus einem Array ohne Array-Index anzeigen, aber ich möchte es Daten jedes Mal im selben Format automatisch anzeigen, ohne li & Tabellen zu verwenden.So vereinfachen Sie diesen Code von VueJS

Mein Code:

<!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>

Right Now i-Array-Index verwende Werte von Array auszudrucken. Wie wird es am einfachsten sein, mehrere Werte anzuzeigen?

Danke.

Quelle

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>

Sie ‚v-für‘ Iterator innerhalb Ihrer Vorlage ein Array-Elemente oder Objekte iterieren, wie Sie mögen, nicht nur Listen oder Tabellen verwenden können. Und ich empfehle Ihnen, eine ID für Ihr Wurzelelement wie '#root' anstelle der Klasse zu verwenden.

Da ich Javascript-Objekt-Format für diese Art von Iterationen verwendet habe, konvertierte ich Ihre Arrays in Javascript-Objekte.

Sie können in den offiziellen Dokumenten von Vue weiterlesen. https://vuejs.org/v2/guide/list.html

Quelle

2017-10-12 21:02:11

Ehrfürchtig, Vielen Dank! –

So vereinfachen Sie diesen Code von VueJS

Antwort

Verwandte Themen