| | |
| | | </header> |
| | | <section id="app"> |
| | | <ul> |
| | | <li> |
| | | <h2>Manuel Lorenz</h2> |
| | | <button>Show Details</button> |
| | | <ul> |
| | | <li><strong>Phone:</strong> 01234 5678 991</li> |
| | | <li><strong>Email:</strong> manuel@localhost.com</li> |
| | | <li v-for="friend in friends" key="friend.id"> |
| | | <h2>{{ friend.name }}</h2> |
| | | <button @click="toggleDetails"> |
| | | {{ detailsAreVisible ? 'Hide' : 'Show'}} Details |
| | | </button> |
| | | <ul v-if="detailsAreVisible"> |
| | | <li><strong>Phone:</strong> {{ friend.phone }}</li> |
| | | <li><strong>Email:</strong> {{ friend.email }}</li> |
| | | </ul> |
| | | </li> |
| | | <li> |
| | | <h2>Julie Jones</h2> |
| | | <button>Show Details</button> |
| | | <ul> |
| | | <li><strong>Phone:</strong> 09876 543 221</li> |
| | | <li><strong>Email:</strong> julie@localhost.com</li> |
| | | </ul> |
| | | </li> |
| | | |
| | | </ul> |
| | | </section> |
| | | </body> |