Projekt: Lotto -- Variablen definieren/ausgeben

Übersicht



Die Verarbeitung und Anzeige kann oft nur über Variablen definiert werden und damit bereiten wir die erste Ziehung der Lottozahlen vor. Dafür wird die Funktion data verwendet.

Variable Daten

Für die Berechnung und Ausgaben bereiten wir einige Variablen vor und zeigen die Startwerte an. Dazu kann der ursprüngiche Inhalt im template-Block reduziert werden und im Script-Block fügen sie zur schon vorhandenen Variable msg weiteren Variablen hinzu (Zeilen 18-26) ...

Hier die neue Struktur von lotto.vue:

vue/vue-tut-lotto/variablen.vue (Source)

 1 <template>
 2   <div class="lotto">
 3     <h1>{{ headline }}</h1>
 4     <h2>{{ msg }}</h2>
 5   <pre>
 6 {{ headline }}
 7 {{ anzahl }}
 8 {{ min }}
 9 {{ max }}
10 {{ ziehung }}
11   </pre>
12   </div>
13 </template>
14 
15 <script>
16 export default {
17   name: 'lotto',
18   data () {
19     return {
20       headline: 'Lotto',
21       msg: 'Ist das der große Gewinn?',
22       anzahl: 6,
23       min: 1,
24       max: 49,
25       ziehung: []
26     }
27   }
28 }
29 </script>

Ausgabe der Inhalte

Die Ausgabe einer Variablen erfolgt dann im Template, wie in den Zeilen 3 und 4 gezeigt oder als Debug-Anweisung in einem <pre>-Block eingeschlossen. Alternativ kann auch eine Ausgabe mit console.log() erfolgen.