<template>
<div>
姓
<input type="text" v-model="firstName">
<p></p>
名
<input type="text" v-model="secondName">
<p></p>
姓名
<input type="text" v-model="fullName">
</div>
</template>
<script>
export default {
name: "Watch",
data() {
return {
firstName: "",
secondName: "",
fullName: "",
}
},
watch: {
firstName(value) {
this.fullName = value +" "+ this.secondName;
},
secondName(value) {
this.fullName = this.firstName +" "+ value;
},
fullName(value) {
let arr = value.split(" ");
this.firstName = arr[0];
this.secondName = arr[1];
}
},
}
</script>
<style scoped>
</style>
- Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化