LU05.S18 - combined usage of several directives

• Download the file and copy the content into the code area of the W3School on the left hand side of the coding window.
• You can execute the code by pressing the run button
• The result will be presented in the right hand side of the window.

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 columns userid, name, surname, email, password
4. The array must contain at at least 4 rows of data
5. v-for: to iterate all data of the multi-dimensional array userList
6. v-if: if the user 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)

Source code of the solution

Volkan Demir