Vue.js_getter and setter

Posted 2020-09-06 YanEr、

<div id="test2">
        <input type="text" v-model="message" /><span>请输入您的姓名和电话号码,中间用“,”分隔</span>
        <p>{{info}}</p>
    </div>
    <script>
        var test2 = new Vue({
            el: "#test2",
            data: {
                message: "leona,18085558666",
            },
            computed: {
                info: {
                    get: function () {
                        var newMessage = this.message.split(",");
                        return "您的姓名是:" + newMessage[0] + "\r\n您的电话号码是:" + newMessage[newMessage.length-1];
                    },
                    set: function (newVal) {
                        this.message = newMessage;
                    }
                }
            }
        })
    </script>

computed 计算属性：

get 读取

set 写入