LU05.A11 - 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

• Code-example: v-if pizza 1
• Code-example: v-if pizza 2

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.

1. Execute the script. As you can see the content of the variable text is displayed on the screen.
2. Now delete the word Pizza from the variable text. Execute your script again.
3. Note your realisations as a html-comment.
4. Save your script acoordingly, whether in your W3School workspace or on you local computer in your code-editor Webstorm

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

Lösung

Volkan Demir