====== LU05.A11 - v-if and functions ======

===== Prerequisites  =====
  * Work type: Individual
  * Means of aid: only teaching materials, no websearch, no use of ai.
  * Timeframe: 15 Minutes
  * Expected result: A Vue script that displays HTML elements based on input values.

===== Learning objectives =====
  - Explaining the The directive //v-if// in your own word.  
  - Being able to apply v-if in combination wit a function 

===== Source =====
  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_pizza |Code-example: v-if pizza 1]]
  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_pizza2 |Code-example: v-if  pizza 2]]
  
===== Assignment 1 ======
As we are now capable to use v-if with logical values (true/false), and furhtermore check actual values e.g. numbers, this assignment is about hoch to check stings (words). For this we are going touse the function //text.includes()// within our v-if.

  - Execute the script. As you can see the content of the variable text is displayed on the screen. 
  - Now delete the word //Pizza// from the variable text. Execute your script again. 
  - 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

===== 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 html-comment.
  - Save your script acoordingly, whether in your W3School workspace or on you local computer in your code-editor Webstorm 

===== Solution =====
[[en:modul:m291:learningunits:lu05:loesungen:11|Lösung]]


===== Vocabulary =====
^ English ^ German ^ 
| afterwards | anschliessend|
| accordingly | entsprechend


----
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir