Variablen#
Um den Vergleich zur vorherigen Version »Lotto1.vue« zu haben, erstellen wir eine neue Datei »Lotto2.vue«
Vorarbeiten#
Damit die Anwendung auch diese neue Komponente verwendet, muss nach dem Erstellen von »Lotto2.vue«, in »App.vue« die folgende Zeile geändert werden:
import Lotto from './components/Lotto2.vue'
Variablen definieren/ausgeben#
Die Verarbeitung und Anzeige der Daten erfolgt für gewöhnlich über Variablen und damit bereiten wir die erste Ziehung der Lottozahlen vor. Die Funktion »setup()« ist für die Initialisierung verantwortlich.
Variable Daten#
In den Variablen speichern wir die Werte für den Start (Zeilen 19-24) in einer JSON-Struktur. Für den ersten Test geben wir im Template-Bereich die Startwerte aus dem Script-Bock aus.
Nachfolgend der neue und erweiterte Inhalt von »Lotto2.vue«:
1<template>
2 <div>
3 <h1>{{ data.headline }}</h1>
4 <h2>{{ data.msg }}</h2>
5 <hr/>
6 Debug-Ausgaben
7 <hr/>
8 <button @click=""> {{ data.max }}</button>
9 <p>
10 {{ data }}
11 </p>
12 <p>Ein einzelner Werte mit der Punktnotation</p>
13 <p> max: {{ data.max }} </p>
14 </div>
15</template>
16
17<script>
18export default {
19 name: 'Lotto2',
20 setup () {
21 const data = {
22 headline: 'Lotto',
23 msg: 'Wird das der grosse Gewinn?',
24 anzahl: 6,
25 min: 1,
26 max: 49,
27 zahlen: [1,2,3,4,5,6,7]
28 }
29
30 return {
31 data
32 }
33 }
34}
35</script>
Ausgabe der Inhalte#
Die Ausgabe einer Variablen erfolgt dann im Template-Bereich, wie im Code gezeigt. Alternativ kann für das Debugging eine Ausgabe mit console.log() erfolgen.
Erste Ausgaben#
