<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
姓：<input type="text"placeholder="Firstname" v-model="Firstname"/><br>
名：<input type="text"placeholder="Lastname" v-model="Lastname"/><br>
姓名：<input type="text"placeholder="fallname1" v-model="fallname1" /><br>
姓名：<input type="text"placeholder="fallname2" v-model="fallname2"/><br>
<h3>如何使用计算属性实现双向</h3>
姓名：<input type="text"placeholder="fallname3" v-model="fallname3"/><br>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#demo",
data:{
Firstname:"1",
Lastname:"2",
fallname2:"1 2",
},
computed:{
// 单向方法一:
// 什么时候执行：初始化显示/相关data属性数据发生变化
// 计算属性中的一个方法，方法的返回值作为属性值
fallname1(){
return this.Firstname+' '+this.Lastname
},
// 双向方法set与get方法:
fallname3:{
// 回调函数：1.你定义的 2，你没有调用 3.但是最终执行了
// 读取当前属性值时回调 根据相关的数据计算并返回当前属性的值
get(){
return this.Firstname+' '+this.Lastname
},
// 回调函数，当属性值发生改变时回调 更新相关的数据
set(value){ //value就是fallname3的新属性
const names = value.split(' ')
this.Firstname=names[0]
this.Lastname=names[1]
}
},
},
// 单向方法2:
// 配置监视
watch:{
// 看Firstname是否发生了变化
Firstname:function(value){
// this是vm对象
this.fallname2=value+' '+this.Lastname
}
}
})
vm.$watch('Lastname',function (value){
this.fallname2=this.Firstname+' '+value
})
</script>
</body>
</html>