Vue learning 10: getters and setters of computed properties

Go directly to the code:
<div id="app">
        <span>{{fullName}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName:'Dell',
                lastName: 'Lee'
            },
            computed: {
                fullName:{
                    get: function () {
                        return this.firstName + " " + this.lastName;
                    },
                    set: function (value) {
                       var arr = value.split(" ");
                       this.firstName = arr[0];
                       this.lastName = arr[1];
                    }
                }
            }
        })
    </script>


1. get is used to obtain the attribute value. Simultaneous computation generates new values.

2. set: used to change the value coming from the hull. When the change occurs, the content of the data also changes.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325830646&siteId=291194637