<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./vue.js"></script>
<!--
计算属性（computed）
定义：要用的属性不存在，通过已又属性计算
原理“底层借助了object.defineproperty方法提供的getter和setter
get函数什么时候执行 初始读取时执行，依赖的数据发生改变时
优势：记录到缓存，效率到，而methed不会记录到缓存
备注：计算属性最终会出现在vm，直接读取使用
计算属性要是被修改，就需要用到set方法
-->
<div id="root">
姓<input type="text" v-model="firstname"><br><br>
名<input type="text" v-model="lastname"><br><br>
全名<input type="text" v-model='fullName'>
</div>
</head>
<body>
<script>
Vue.config.productionTip = false;
var vm = new Vue ({
el : '#root',
data : {
firstname : '王',
lastname : '五'
},
computed:{
fullName:{
get(){
return this.firstname + '-' + this.lastname
},
set(value){
console.log('set',value)
var arr = value.split('-')//split 打印成数组
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
</body>
</html>