姓名案例-watch实现

  <div id="root">
    姓：<input type="text" v-model="firstname"><br><br>
    名：<input type="text" v-model="lastname"><br><br>
    全名：<span>{{fullname}}</span>
    <!-- <span>{{a}}</span> -->
</div>

<script>

    //创建Vue实例
    const vm = new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
            firstname: '张',
            lastname: '三',
            fullname: '张-三',
            // x: 1,
            // y: 2
        },
        computed: {
            // a() {
            //     return this.x + this.y
            // }
        },
        watch: {

            firstname(val) {
                setTimeout(() => {
                    this.fullname = val + '-' + this.lastname
                }, 1000);

            },
            lastname(val) {
                setTimeout(() => {
                    this.fullname = this.firstname + '-' + val
                }, 1000);

            }
        }
    })

</script>