LU05.A08 - v-if (simple)

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

1. Explaining the The directive v-if in your own word.
2. Manipulating simple DOM elements based on the directive v-if

• Code-example: v-if directive src

In the script area of the W3-School example (link above) you will find a variable typewritersInStock with the value true. In the html area of the same script there will be decided, what is supposed to happen in which case. In the true-case there are typewriters on stock, and in the else-case (v-else) they are not.

1. Change the value of the variable onStock to false and run the script.
2. Note your realisations as a html-commen?
3. Save your script acoordingly, whether in your W3School workspace or on you local computer in your code-editor Webstorm.

Lösung

1. Download another picture of your choice.
2. Create in your W3 workingspace a directory media and save the downloaded picture there
3. overwrite the url in the app to display your new local picture
4. Execute your script by having it run.
5. Save your solution accordingly. Therefore you might need a W3-School-Account.

Lösung

Volkan Demir