Lottozahlen bebildert#
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 im static-Ordner zur Verfügung stehen.
Hier der Download mit allen Bildern:
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="ziehung()">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>