compute计算属性的set,get

<div id="app">
    <div>{{fullName}}</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "<h1>Dell</h1>",
            firstName: "sheng",
            lastName: "jun yong",
            age: 28
        },

        // 方式二
        // 计算属性有缓存,第一次调用执行一次,只要与其相关属性不变,多次调用只会执行一次方法,节约性能
        computed: {
            // 调用{{fullName}}无需括号,fullName相当于一个属性this.fullName,该方法的返回值就是属性值
            fullName: {
                // vm.fullName 获取计算属性值,会调用get方法
                get(){
                    console.log("------------")
                    return this.firstName + " " + this.lastName
                },
                // vm.fullName="bao gui" 设置计算属性值,会调用set方法
                // name是fullName设置的值,会传进来
                set(name){
                    var arr = name.split(" ")
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        },

    })
</script>

猜你喜欢

转载自www.cnblogs.com/shengjunyong/p/12150279.html