<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<script src='../js/vue.js'></script>
</head>
<body>
<div id='app'>
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名: <input type="text" placeholder="Full Name1" v-model="fullName"><br>
</div>
<script>
new Vue({
el: '#app',
data: {
firstName: 'A',
lastName:"B",
fullName:"A-B"
},
watch:{
//监视firstName的变化
firstName(value){
this.fullName = value +"-"+this.lastName;
},
//监视lastName的变化
lastName(value){
this.fullName = this.firstName+"-"+value;
},
//监视fullName的变化
fullName(value){
const v = value.split("-");
this.firstName = v[0];
this.lastName = v[1];
}
}
})
</script>
</body>
</html>
