基本的demo：
<!-- /**
* @Author: cyany_blue
* @Date: 2018-05-29 22:14:19
* @Last Modified by: cyany_blue
* @Last Modified time: 2018-05-29 22:19:51
*/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="a">
<input type="text" v-model="b">
<p>{{a}}----{{b}}</p>
<p>{{c}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
a:'',
b:'',
//此时这里是不可以初始化赋值c的，切记！！！
},
computed:{
c:function(){
// this指的是vm实例
return this.a+this.b
}
},
methods:{
}
})
</script>
</html> <!-- /**
* @Author: cyany_blue
* @Date: 2018-05-29 22:14:19
* @Last Modified by: cyany_blue
* @Last Modified time: 2018-05-29 22:49:05
*/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="a">
<input type="text" v-model="b">
<p>{{a}}----{{b}}</p>
<input type="text" v-model="c">
<hr>
<input type="text" v-model="e">
<p>{{e+a}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
a:'',
b:'',
e:''
},
watch:{
e:function(val){
this.abc(); 只要e的值一改变，就会触发abc方法
}
},
computed:{
// c:function(){
// // this指的是vm实例
// return this.a+this.b
// }
c:{
get:function(){
return this.a+this.b;
},
set:function(newVal){
var names = newVal.split('');
this.a = names[0];
this.b = names[1];
}
}
},
methods:{
abc:function(){
console.log('haha')
}
}
})
</script>
</html>