LU05.A18 - combined usage of several directives

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 80 Minutes
• Expected result: A Vue script that uses all issued directives:
  • v-bind (images and styles)
  • v-if/v-else including logical operators
  • v-show and
  • v-for including arrays

• Make use of several directives in one script:
  • v-bind,
  • v-show,
  • v-if/v-else-if, v-else,
  • v-show,
  • v-for

For this assignment there is no basic file, thus you need to start from the scratch. But mind, that you have already worked on several assignments and subsequently have the basic structure.

Create a vue script that uses all issued VUE directives in combination.

1. v-bind: image and style
2. textoutput in the { {…} } notation (double brackets)
3. a multi-dimensional array userList containing the userid, name, surename, email, password
4. array with at least 4 rows of data
5. v-for: to iterate all data of the multi-dimensional array
6. v-if: if the user is matches with the search-person a image (v-show) of this person will be displayed, along with all the detail-data
7. v-else: only username, name and surename are displayed, along with a different general user image (v-show)

Lösung

Volkan Demir