Projekt: Lotto -- wahlweise Ausgaben

Übersicht



Die Anwendung funktioniert, aber ein wenig Feinschliff ist immer möglich. Wie wäre es, wenn wir den Spruch "Ist das der große Gewinn?" erst dann anzeigen, wenn die Zahlen gezogen worden sind. Aktuell wird der Spruch sofort nach dem Laden der Seite angezeigt.

Fallunterscheidung mit v-if

Mit v-if wird ein Vergleich gestartet und nur wenn der einen true-Wert erzeugt, wird der Inhalt des Elements/Blocks ausgegeben.

Hier die finale Version von lotto.vue:

<template>
  <div class="lotto">
    <h1>{{ headline }}</h1>
    <button v-on:click="dice()">Würfeln ...</button>

    <h2 v-if="ziehung.length > 0">{{ msg }}</h2>

    <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>
/files/vue/vue-tut-lotto/lotto02.png