计算属性 - getter & setter-全选逻辑

计算属性 - getter & setter

1.计算属性里面的get方法,当结构有对data属性有复杂的计算时,就需要用到计算属性.
2.计算属性,属性名当方法名这个写法是简写,完整的写法计算属性名应该是一个对象

computed:{
//get方法的简写
//fullName(){
//return this.firstName+''+this.lastName
//}

//get完整写法
fullName:(){
//当结构中使用fullName,找到计算属性fullName的get方法
get(){
return this.firstName+''+this.lastName
}
}
}

#计算属性setter

• set方法

• 当改变计算属性时，需要提供set方法

  • 一般在set里面把改变后的值设置给它的依赖

• 如果需要set方法时，一定要完整写法

• 应用场景：全选逻辑

computed: {
    fullName: {
        set(newVal){
            // newVal就是fullName改变后的值
            console.log(newVal)
            // 一般在set里面把改变后的值设置给它的依赖
            //sam wang
            let arr = newVal.split(' ')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

计算属性 - setter与全选逻辑

computed: {
    isAll: {
        get () {
            // 所有技能都选中isAll选中
            return this.isjs && this.iscss && this.isVue
        },
        set(status){
            console.log(status)
            // 保持技能的选中状态和status一样
            this.isjs = status
            this.iscss = status
            this.isVue = status
         }
    }
}