注意：里面的this都是代表vue实例（vm对象）
<body>
<div id="demo">
<input type="text" placeholder="First Name" v-model="firstName"/>
<input type="text" placeholder="Last Name" v-model="lastName"/>
<input type="text" placeholder="Full Name" v-model="fullName1"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:‘#demo‘,
data:{
firstName:‘A‘,
lastName:‘B‘,
},
computed:{
//什么时候执行：初始化显示/相关的data属性数据发生改变
fullName1 (){
console.log(‘fullName1()‘)
return this.firstName+‘ ‘+this.lastName
}
}
})
</script>
</body>
<body>
<div id="demo">
<input type="text" placeholder="First Name" v-model="firstName"/>
<input type="text" placeholder="Last Name" v-model="lastName"/>
<input type="text" placeholder="Full Name" v-model="fullName3"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:‘#demo‘,
data:{
firstName:‘A‘,
lastName:‘B‘,
fullName2:‘A B‘
},
computed:{
fullName3:{
//计算并返回当前属性的值
get(){//计算属性中的一个方法，方法的返回值作为属性值
return this.firstName+‘ ‘+this.lastName
},
//监视当前属性值得变化，当属性值发生改变时回调，更新相关的属性数据
set(value){//value就是fullname3的最新属性值
var names = value.split(‘ ‘)
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
</script>
</body>
=所有vm实例的方法都以$开头=
<body>
<div id="demo">
<input type="text" placeholder="First Name" v-model="firstName"/>
<input type="text" placeholder="Last Name" v-model="lastName"/>
<input type="text" placeholder="Full Name" v-model="fullName2"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:‘#demo‘,
data:{
firstName:‘A‘,
lastName:‘B‘,
fullName2:‘A B‘
},
watch:{
firstName:function(value){
this.fullName2 = value +" "+this.lastName
}
}
})
app.$watch(‘lastName‘,function(value){
this.fullName2=this.firstName+‘ ‘+value
})
</script>
</body>
原文：https://www.cnblogs.com/psyduck/p/14355960.html