en:modul:m291:learningunits:lu05:aufgaben:09

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu05:aufgaben:09 [2025/01/27 13:53] – angelegt vdemiren:modul:m291:learningunits:lu05:aufgaben:09 [2025/03/28 08:27] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU05.A09 - v-if with logical operators ======+====== LU05.A09 - v-else-if and v-else ======
  
 ===== Prerequisites  ===== ===== Prerequisites  =====
   * Work type: Individual   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 10 Minutes+  * Timeframe: 15 Minutes
   * Expected result: A Vue script that displays HTML elements based on input values.   * Expected result: A Vue script that displays HTML elements based on input values.
  
 ===== Learning objectives ===== ===== Learning objectives =====
   - Explaining the The directive //v-if// in your own word.     - Explaining the The directive //v-if// in your own word.  
-  - Being able to apply logical operators within a v-if directive.  +  - Being able to apply v-if in combination wit e-else-if and v-else
  
 ===== Source ===== ===== Source =====
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_typewriters2 |Code-example: v-if directive src]] +  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_typewriters3 |Code-example: v-if directive src]] 
 +  
 ===== Assignment ====== ===== Assignment ======
-The first assignment checked by using v-if whether a certain variable was checked or not (true/false9Bei der ersten Aufgabe hat v-if binären Werte (true/false) geprüft. Now, we want to go one step further and check not only whether it is true or false, but moreover which value it contains. By this, we would be able to tell the customer of how many typewriters we have in stock, which may be of some benefit for the customer as well as for us.+In this assignment we are going to use //v-if// in compination with both //v-else-if// and //v-else-if//. This three selection elements of VUE allow us to check up to any number of values, e.g. //in stock//, //very few left// oder //not on stock//.
  
-  - Change the value of the variable //typewriter// to 0 und execute the script.  +  - Change the content of the variable //typewriter// to a value between 0 und 5. Run afterwords the script.    
-  - Note your realisations as a html-comment. +  - Introduce a additional paragraph with //plenty// for a stock more than 10.
-  - Change the content of the variable //typeWriter" to -1.  +
-  - What happens, if the value //typeWiter// has no value at all respectively is empty?+
   - Note your realisations as a html-comment.   - Note your realisations as a html-comment.
   - Save your script acoordingly, whether in your W3School workspace or on you local computer in your code-editor Webstorm.   - Save your script acoordingly, whether in your W3School workspace or on you local computer in your code-editor Webstorm.
- 
- 
 ===== Solution ===== ===== Solution =====
-[[en:modul:m291:learningunits:lu05:loesungen:03|Lösung]]+[[en:modul:m291:learningunits:lu05:loesungen:09|Lösung]]
  
-===== Assignment 2: local src ===== 
-  - Download another picture of your choice.  
-  - Create in your W3 workingspace a directory //media// and save the downloaded picture there 
-  - overwrite the url in the app to display your new local picture 
-  - Execute your script by having it //run//. 
-  - Save your solution accordingly. Therefore you might need a W3-School-Account.  
- 
-===== Solution ===== 
-[[en:modul:m291:learningunits:lu05:loesungen:08|Lösung]] 
  
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-| ... | ... |+| afterwards | anschliessend|
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/09.1737982401.txt.gz
  • Zuletzt geändert: 2025/01/27 13:53
  • von vdemir