当前位置:

Vue计算属性的setter和getter

温馨提示:本文共532个字,读完预计2分钟。

计算属性的setter和getter

get 传入值

set接收外部传来的value

插值表达式的内容,先去data对象中去找,找不到就会去computed对象中去找,找到显示到页面上

<div id="app">{{fullName}}</div>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell"
lastName:"Lee"
},
computed:{
    fullName:{
    get:function() {
        return this.firstName + " " + this.lastName
    },
    set:function(value) {//通过设置一个值来改变它相关联的值
    var arr = value.splice(" ");
    this.firstName = arr[0];
    this.lastName = arr[1];
    }
    }
}
})

原理:computed依赖的变量发生变化,它会重新计算

this.firstName值在set中发生了变化,而this.firstName又是get中computed依赖的值,因此会重新计算,DOM发生变化

本文链接:,转发请注明来源!
评论已关闭。