vue的那点事-计算属性完整写法

16 阅读1分钟
  • 计算属性完整写法
  • 计算属性默认的简写,只能读取访问,不能“修改”
  • 如果要“修改”---需要写计算属性的完整写法

image.png

image.png

const app = new Vue({

    // 通过el配置选择器 指定vue管理的是哪个盒子

    el:'#app',

    //通过data提供数据

    data:{

        firstName:'刘',

        lastName:'备',

    },

    methods:{

        changeName(){

            this.fullName = '吕小布'

        }

    },

    computed:{

        //计算属性里面写函数

        //计算属性:有缓存的,一旦计算出来结果,就会立刻缓存

        // 下一次读取---直接读缓存就行---性能特别高

        //简写 --- 获取,没有配置设置的逻辑
        //完整写法---获取+设置

        fullName:{

            //当fullName计算属性,被获取求值时,执行get(有缓存,优先读取缓存)

            //会将返回值作为,求值的结果

            get(){

                return this.firstName + this.lastName

            },

            //当fullName计算属性,被修改赋值时,执行set

            // 修改的值,传递给set方法的形参

            set(value){

                //slice(0,1) 截取第一个字符

                //slice(1) 截取第一个字符后面的所有字符

                this.firstName = value.slice(0,1)

                this.lastName = value.slice(1)
            }
        }
    }
})