vue中的属性计算和属性监听

获取完整的名字，需要把姓和名字拼接在一起

思路：什么时候去拼接在一起（input值改变的时候，监听keyup知道input什么时候改变了，在这里就可以获取完整的名字

    <div id='app'>
        <input type="text" v-model='firstname'>+
        <input type="text" v-model="lastname"> <button>=</button>
        <input type="text" v-model="name">
    </div>
 
 
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstname: "",
                lastname: "",
            },
            //属性监听
            // watch: {
            //     "firstname": function (newvalue,oldvalue) {
            //         this.name = this.firstname + this.lastname
            //     },
            //     "lastname": function (newvalue,oldvalue) {
            //         this.name = this.firstname + this.lastname
            //     }
            // },
            // 属性计算 
            computed:{
                // name:function(){
                //     return this.firstname + '-' + this.lastname
                // }
                // 2
                name:{
                    get:function(){
                        return this.firstname + '-' + this.lastname
                    },
                    // 只有修改自身时会触发
                    set:function(value){
                       this.firstname =  value.split("-")[0]
                       this.lastname =  value.split("-")[1]
                    }
                }
            }
 
        })
    </script>

注意： 属性计算 不能和data里面数据冲突
            计算属性中所依赖的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
————————————————
版权声明：本文为CSDN博主「我带你们飞」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_47619284/article/details/124181399