<div id="app">
<user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>
<div>First name: {{ firstName }}</div>
<div>Last name: {{ lastName }}</div>
</div>const UserName = {
props: {
firstName: String,
lastName: String
},
template: `
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)">
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)">
`
};
const App = {
components: {
UserName
},
data() {
return {
firstName: "Tim",
lastName: "Duncan"
};
}
};
Vue.createApp(App).mount("#app");
External CSS
This Pen doesn't use any external CSS resources.