LU05.A10 - v-if and functions

• 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.

1. Explaining the The directive v-if in your own word.
2. Being able to apply v-if in combination wit a function

• Example without image: Code-example: v-if pizza 1
• Example with image: Code-example: v-if pizza 2

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.

1. 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.
2. Now delete the word Pizza from the variable text in the script-area. Execute your script again.
3. Note your realisations as a comment.
4. Save your script acordingly, whether in your W3School workspace or locally in your Webstorm code-editor

In the if paragraph there is a image of a pizza displayed as well.

1. Add a section v-else with a according img-tag which shows a different image than a pizza.
2. Note your realisations as a code-comment.
3. Save your script acordingly, whether in your W3School workspace or locally in your Webstorm code-editor

Lösung

Volkan Demir