1、需求
当 姓 或者 名 的改变时，姓名 改变；
当 姓名 改变时，姓 或者 名 改变；
注：姓名框中，姓和名之间用空格隔开
2、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
姓: <input type="text" v-model="firstName">
名: <input type="text" v-model="lastName">
姓名 <input type="text" v-model="fullName">
</div>
<script>
const vm = new Vue({
el:"#demo",
data:{
firstName:'A',
lastName:'B'
},
computed:{
fullName:{
//回调函数的3个特点：你定义的；你没有调用；但它最终执行了
//关于回调函数，需要知道：什么时候调用；用来做什么
//回调函数 当需要读取当前属性值fullName时回调，根据相关的数据计算（此处为firstName、lastName）并返回当前属性的值
get(){
return this.firstName +' ' +this.lastName
},
//回调函数 监视当前属性值fullName的变化，当属性值fullName发生改变时回调，更新相关的属性数据（此处为firstName、lastName）
set(value){//value为fullName的新值
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
</script>
</body>
</html>