use v-model
This commit is contained in:
parent
6157d34472
commit
dd934f5340
|
@ -4,42 +4,34 @@
|
||||||
<h2>{{ user.age }}</h2>
|
<h2>{{ user.age }}</h2>
|
||||||
<button @click="setAge">Change Age</button>
|
<button @click="setAge">Change Age</button>
|
||||||
<div>
|
<div>
|
||||||
<input type="text" placeholder="First Name" @input="setFirstName" />
|
<input type="text" placeholder="First Name" v-model="user.firstName" />
|
||||||
<input type="text" placeholder="Last Name" @input="setLastlName" />
|
<input type="text" placeholder="Last Name" v-model="user.lastName" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { reactive, ref, computed } from 'vue';
|
import { reactive, computed } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const user = reactive({
|
const user = reactive({
|
||||||
|
firstName: '',
|
||||||
|
lastName: '',
|
||||||
age: 23
|
age: 23
|
||||||
});
|
});
|
||||||
const firstName = ref('');
|
|
||||||
const lastName = ref('');
|
|
||||||
|
|
||||||
user.name = computed(function() {
|
user.name = computed(function() {
|
||||||
return firstName.value + ' ' + lastName.value;
|
return user.firstName + ' ' + user.lastName;
|
||||||
});
|
});
|
||||||
|
|
||||||
function setAge() {
|
function setAge() {
|
||||||
user.age = '25';
|
user.age = '25';
|
||||||
}
|
}
|
||||||
|
|
||||||
function setFirstName(event) {
|
|
||||||
firstName.value = event.target.value;
|
|
||||||
}
|
|
||||||
function setLastlName(event) {
|
|
||||||
lastName.value = event.target.value;
|
|
||||||
}
|
|
||||||
return {
|
return {
|
||||||
user,
|
user,
|
||||||
setAge,
|
setAge
|
||||||
setFirstName,
|
|
||||||
setLastlName
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue