Vorherige

Nächste

Übung zu Rendern von Listen

Abgeschlossen

Bevor Benutzer sich für das Buchen einer Kreuzfahrt entscheiden, sollten sie wissen, welche Optionen verfügbar sind und wie viel sie kosten. Zeigen wir diese Optionen nun an.

Klonen Sie das Starter-Repository und sehen Sie sich den Code an

Wir haben Ihnen für dieses Modul ein Starter-Repository bereitgestellt.

1. Klonen Sie das Starter-Repository und öffnen Sie den Ordner in Visual Studio Code, indem Sie den folgenden Code ausführen:

   git clone https://github.com/MicrosoftDocs/mslearn-vue-dynamic-render/
   cd mslearn-vue-dynamic-render/start
   code .
   

2. Öffnen Sie die Datei index.js. Beachten Sie das Array von productClasses-Objekten. Jede productClass hat die Eigenschaften name, price, seatsAvailable und earlyBird.

Anzeigen der Liste der Optionen und Preise

Aktualisieren wir nun den HTML-Code, um die Liste der Optionen und ihre Preise anzuzeigen.

1. Öffnen Sie die Datei index.html .

2. Fügen Sie in der Zeile nach dem Kommentar „TODO: Add code to display classes“ den folgenden HTML-Code hinzu:

   <div v-for="(productClass, index) in productClasses" :key="index" class="row">
       <div class="column">
           {{ productClass.name }}
       </div>
       <div class="column">
           $ {{ productClass.price.toLocaleString('en-US') }}
       </div>
       <!-- More to come -->
   
   </div>
   

Untersuchen des Codes

Im vorangehenden Code erstellt die v-for-Anweisung ein neues div-Element für jedes productClass-Element. Der Code generiert außerdem einen index für jedes Element, den Sie als :key für die Anzeige verwenden. Schließlich sehen Sie, dass der Code name und price für jedes productClass-Element anzeigt.

Hinweis

Beachten Sie, dass toLocaleString aufgerufen wird. Da Sie innerhalb der doppelten geschweiften Klammern ({{ }}) arbeiten, können Sie ein beliebiges gültiges JavaScript aufrufen. Die Gebietsschema-Zeichenfolge ist derzeit auf en-US festgelegt, Sie können sie jedoch für Ihre bestimmte Region aktualisieren.

Öffnen Sie die Seite in Live Server

Die Live Server-Erweiterung für Visual Studio Code erstellt einen Entwicklungs-Web-Server dar, der die Seite automatisch aktualisiert, wenn Änderungen erkannt werden. Nachdem Sie die Erweiterung installiert haben, können Sie sie zum Hosten der Seite verwenden.

1. Speichern Sie alle Dateien.

2. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie Strg+Umschalt+P (oder Cmd+Umschalt+P auf einem Mac) auswählen.

3. Geben Sie Live Server: Open with Live Server ein.

   Eine Meldung in der unteren rechten Ecke bestätigt, dass die Seite jetzt unter gehostet http://localhost:5500 wird.

4. Öffnen Sie einen Browser, und navigieren Sie zu http://localhost:5500.

Nun sollte die Seite angezeigt werden, die Sie erstellt haben.

Weiter