vue——9-vue计算属性-setter

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82727505

<div id="enjoy">
    <!--lucy bob-->
    <p>{{fullName}}</p>
    <!--john tom-->
    <button @click="deal()">调用setter方法</button>
</div>
</div>

        {
            new Vue({
                el: '#enjoy',
                data: {
                    firstName: 'lucy',
                    lastName: 'bob'
                },
                computed: {
                    // //get
                    // fullName(){
                    //     return this.firstName+' '+this.lastName;
                    // }
                    fullName: {
                        //get方法
                        get() {
                            return this.firstName + ' ' + this.lastName;
                        },
                        //set方法
                        set(str) {
                            let nameArr = str.split(' ');
                            this.firstName = nameArr[0];
                            this.lastName = nameArr[1];
                        }
                    }
                },
                methods: {
                    deal() {
                        //调用fullName的setter方法
                        this.fullName = 'john tom';
                    }
                }
            })
        }