vue 计算属性中get,set用法.

4,995 阅读1分钟
<div id="app">
    <div @click="alert">{{fullName}}</div>
</div>
var app = new Vue({
    el: "#app",
    data: {
        firstName: "zhang",
        lastName: "yuanghao",
    },
    methods: {
        alert: function () {
            this.fullName="hu yang";
        }
    },
    computed: {
        fullName: {
            get: function () {
                return this.firstName + "-" + this.lastName;
            },
            set: function (value) {
                var arr = value.split(" ");
                this.firstName = arr[0];
                this.lastName = arr[1];
                return this.firstName + "-" + this.lastName;
            }
        }
    }


})

get是在用读取计算属性fullName的时候使用的,
set是在fullName被重新设置后使用的
当firstName发生改变,
计算属性中的fullName依赖着firstName会重新计算,
在fullName重新后页面会发生改变.