lotto5
Projekt: Lotto -- Daten verpacken
Manche mögen nüchterne Zahlen, Andere wieder lieben bunte Bilder. Für die letztgenannte Fraktion ersetzen wir die Zahlen durch schicke Bilder.
Daten ändern mit Methode
In einem Listen-Element lassen wir eine Wiederholung mit for laufen. Jeder durchlauf erzeugt die HTML-Syntax für einen Bildaufruf, wobei die Zahl mit eingebaut wird. Die Bilder werden nur sichtbar, wenn Sie diese auch i static-Ordner zur Verfügung stellen. Hier der Download mit allen Bildern: Lottozahlen als Bild
schauen Sie sich die Ausgabe ohne die Bilder an
-
starten Sie die Entwicker-Konsole um die Fehlermedungen und Ausgaben wahr zu nehmen:
Sie finden in der Bildsammlung auch ein alternatives Logo.
Hier das erweiterte Template von lotto.vue:
<template> <div class="lotto"> <h1>{{ headline }}</h1> <h2>{{ msg }}</h2> <button v-on:click="dice()">Würfeln ...</button> <ul> <li v-for="item in ziehung"> <img class="randimg" v-bind:src="'../static/lotto-zahlen/' + item + '.png'" v-bind:alt="item"/> </li> </ul> </div> </template>
