lotto5

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>