55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
"use strict";
|
|
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
friends: [
|
|
{
|
|
id: "manuel",
|
|
name: "Manuel Lorenz",
|
|
phone: "01234 5678 991",
|
|
email: "manuel@localhost.com",
|
|
},
|
|
{
|
|
id: "julie",
|
|
name: "Julie Jones",
|
|
phone: "09876 543 221",
|
|
email: "julie@localhost.com",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
});
|
|
|
|
// use multiword component names
|
|
app.component("user-contact", {
|
|
template: `
|
|
<li>
|
|
<h2>{{ friend.name }}</h2>
|
|
<button @click="toggleDetails()">Show Details</button>
|
|
<ul v-if="detailsAreVisible">
|
|
<li><strong>Phone:</strong> {{ friend.phone }}</li>
|
|
<li><strong>Email:</strong> {{ friend.email }}</li>
|
|
</ul>
|
|
</li>
|
|
`,
|
|
data() {
|
|
return {
|
|
detailsAreVisible: false,
|
|
friend: {
|
|
id: "manuel",
|
|
name: "Manuel Lorenz",
|
|
phone: "01234 5678 991",
|
|
email: "manuel@localhost.com",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
toggleDetails() {
|
|
this.detailsAreVisible = !this.detailsAreVisible;
|
|
},
|
|
},
|
|
});
|
|
|
|
app.mount("#app");
|