1.template中写入布局
<!-- 1.methods动态绑定值 -->
动态添加1：<input v-model="firstName"/>
动态添加2：<input v-model="secondName"/><br/>
全名（methods完成）：<span>{{addTotalName()}}</span><br/>
<!--2. computed 计算属性动态绑定值 -->
全名(计算属性完成)：<span>{{fullName}}</span>
2.script代码
data中写入属性
<!-- 1.methods动态绑定 -->
methods: {
addTotalName(){
//Vue中methods中this是指向Vue，在Vue外的this指向window
return this.firstName+"-"+this.secondName;
}
}
<!-- 2.计算属性动态绑定 -->
计算属性fullName本身不存在，通过已有的"属性"计算而来,即Vue中data中自定义的属性
原理：底层借助了Object.defineProperty中的getter和setter
计算属性最终会出现在Vue本身上，直接用即可，如以上直接拿fullName即可
computed:{
//fullName为计算出来的新属性
fullName:{
//get有什么用？当有人读取fullName时，get会被调用，且返回值为fullName的值
//get什么时候调用？
//1.由于computed计算属性有缓存机制，在初次读取fullName时，会调用
//2.所依赖的数据（this.firstName，this.secondName）发生变化时候会调用
get(){
return this.firstName+"-"+this.secondName;
},
//set是fullName需要被修改的时候调用,value为修改后的值
set(value){
//可以通过value.split("-")[0],[1]获取到新的值赋值给this.firstName和this.secondName
}
}
}
总结：计算属性相对于methods数据绑定，其特点是有缓存，methods没有缓存，fullName重复被读取且依赖数据无变化时，只调用一次，故相对于methods方法绑定更能节省资源，性能更加优化；methods则在重复读取时候被多次调用，即读取一次调用一次。
