手把手教你VUE从入门到放弃—— 篇九（vue的计算属性中的get ，set方法的使用）
不多讲，敲下就知道了 ,total通过get方法自动获取，在改变 num1 或者num2时又会自动调用get方法从而改变total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的计算属性的get，set方法的使用</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<h1>{{num1}}</h1>
<h1>{{num2}}</h1>
<h1>{{total}}</h1>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
num1:0,
num2:0
},
//计算属性返回值实现
computed:{
total:{
get:function(){
return this.num1 +" "+ this.num2;
},
set:function(total){
var arr = total.split(" ");
this.num1 = arr[0];
this.num2 = arr[1];
}
}
}
});
</script>
</body>
</html>
测试如图