计算属性的setter和getter
刚才通过计算lastName和firstName获取了整个姓名,当时我们只是通过一直的data对象中属性进行合成的,这个也就是计算属性(computed)的get方法(默认),实质上还有一个set方法,我们来看一下getter和setter;
<div id="app">{{fullName}}</div>
<script>
var app=new Vue({
el:"#app",
data:{
lastName:"Make",
firstName:"Ma",
},
computed:{
fullName:{
get:function(){
return this.firstName+" "+this.lastName;
},
set:function(val){
console.log(val)
var names=val.split(" ");
this.firstName=names[0]
this.lastName=names[1]
}
}
}
})get就是通过原有的进行合成,而这个set就是可以将计算属性进行重新赋值,然后set会得到这个val,这个实例是通过重新设置set,然后通过空格(" ")分开,填充到数组中,第一项作为firstName,第二项作为lastName,从而改变data层,视图层随之而变!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读