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:

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:

../../_images/fehlendes-bild2.png
  • 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>
../../_images/lotto01.png