<!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>
<br>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
firstName:"A",
lastName:"B",
fullName:"A-B"
}
})
vm.$watch("firstName",function(value){
this.fullName = value+"-"+this.lastName;
})
vm.$watch("lastName",function(value){
this.fullName = this.firstName + "-" + value;
})
vm.$watch("fullName",function(value){
const v = value.split("-");
this.firstName = v[0];
this.lastName = v[1];
})
</script>
</body>
</html>
