Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:aufgaben:10 [2025/03/04 12:16] – vdemir
+++ en:modul:m291:learningunits:lu05:aufgaben:10 [2025/03/28 10:55] (aktuell) – [Vocabulary] vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05.A09 - v-else-if and v-else ======
+====== LU05.A10 - v-if and functions ======
 ===== Prerequisites  =====
@@ Zeile 9: / Zeile 9: @@
 ===== Learning objectives =====
   - Explaining the The directive //v-if// in your own word.
-  - Being able to apply v-if in combination wit e-else-if and v-else
+  - Being able to apply v-if in combination wit a function
-===== Source =====
+===== Sourcecode of the solution =====
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_typewriters3 |Code-example: v-if directive src]]
+  * Example without image: [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_pizza | Code-example: v-if pizza 1]]
+  * Example with image: [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_pizza2 |Code-example: v-if pizza 2]]
-===== Assignment ======
-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 content of the variable //typewriter// to a value between 0 und 5. Run afterwords the script afterwards.
+===== Assignment 1 ======
-  - Introduce an additional paragraph with //plenty// which contains a values less than 10
+As we are now capable to use //v-if// with logical values (true/false), and furthermore check actual values e.g. numbers, this assignment is about hoch to check //string-values// (words). For this we are going to use the function //text.includes()// within the //v-if//.
-  - 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
+  - Execute the script. As you can see the content of the variable text is displayed on the screen as //text// contains the search-string //Pizza// with a kapital //P//.
+  - Now delete the word //Pizza// from the variable //text// in the script-area. Execute your script again.
+  - Note your realisations as a comment.
+  - Save your script acordingly, whether in your W3School workspace or locally in your Webstorm code-editor
+===== Assignment 2 =====
+In the if paragraph there is a image of a pizza displayed as well.
+  - Add a section //v-else// with a according //img-tag// which shows a different image than a pizza.
+  - Note your realisations as a code-comment.
+  - Save your script acordingly, whether in your W3School workspace or locally in your Webstorm code-editor
 ===== Solution =====
@@ Zeile 29: / Zeile 37: @@
 ^ English ^ German ^
 | afterwards | anschliessend|
+| accordingly | entsprechend |