随笔 - 326, 文章 - 0, 评论 - 0, 阅读 - 16万

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title></title>
    <script src='../js/vue.js'></script>
</head>

<body>
    <div id='app'>
        姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
        名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名: <input type="text" placeholder="Full Name1" v-model="fullName"><br>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: 'A',
                lastName:"B",
                // fullName1:""
            },
            computed:{
                //get方法,不能点击,点击就相当于set方法了
                //初始显示的时候调用,更新的时候调用

                //情况一,此方式为 get 方式
                // fullName1(){
                //     //firstName与lastName是依赖属性,依赖属性改变的时候改变
                //     return this.firstName+"-"+ this.lastName
                // }

                //情况二,此方式为 get 方式
                // fullName:{
                //     //firstName与lastName是依赖属性,依赖属性改变的时候改变
                //     get(){
                //         return this.firstName+"-"+this.lastName
                //     }
                // }

                //情况三,此方式为 get/set 方式
                fullName:{
                    get(){
                        return this.firstName+"-"+this.lastName;
                    },
                    set(value){
                        const v = value.split("-");
                        console.log(v);
                        this.firstName = v[0];
                        this.lastName = v[1];
                    }
                }
            }
        })
    </script>
</body>

</html>