<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.active{
color:red;
}
.line{
color:blue;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{fullName}}</h2>
姓名:<input :placeholder="placeholder" v-model="fullName"/>
<br />
<div style="margin-left: -60px;white-space: pre-wrap;">
姓: <input :placeholder="placeholder" v-model="firstName"/>
名: <input :placeholder="placeholder" v-model="lastName"/>
</div>
</div>
<script>
new Vue({
el:"#root",
data:{
placeholder:"请输入一段文字",
firstName:"",
lastName:""
},
computed:{
fullName:{
set:function(newValue){
const names=newValue.split(/[ ]+/);
this.firstName=names[0];
if(names[1])
this.lastName=names[1];
else
this.lastName="";
},
get:function(){
if(this.firstName=="")
return ;
else if(this.lastName=="")
return this.firstName;
else
return this.firstName+" "+this.lastName;
}
}
}
})
</script>
</body>
</html>