VueJS-getter and setter

computed 计算属性：

1、get 读取

 <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];
                    }
                }
            }
        })
    </script>

页面：

【初始打开时】

      

【重新输入信息后】

         

 

【清空输入信息后】

 

 

2、set 写入

 <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 = newVal;
                    }
                }
            }
        })
        test2.info = "欧阳娜娜,18585464625";
    </script>

 页面：

【初始打开时】