Vue之监视 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="demo">
    姓：<input type="text" placeholder="First Name" v-model="firstName"><br/>
    名：<input type="text" placeholder="Last Name" v-model="lastName"><br/>
    姓名1：<input type="text" placeholder="Full Name1" v-model="fullName1"><br/>
    姓名2：<input type="text" placeholder="Full Name2" v-model="fullName2"><br/>
    姓名3：<input type="text" placeholder="Full Name3" v-model="fullName3"><br/>
</div>



<script src="../js/vue.js"></script>

<script>
    //实例对象  就是vm
    var app = new Vue({
        el: '#demo',
        data: {   //数据 （model）
            firstName: 'A',
            lastName: 'B',
            fullName2:'CD'
        },
        computed:{
            fullName1(){
                return this.firstName +' '+ this.lastName;
            }
        },
        watch: {
            firstName: function (value){// firstName发生了变化
                this.fullName2=value+''+ this.lastName;
            }
        },
    })

    vm.$watch('lastName',function (value){
            this.fullName2=value+''+ this.lastName;
    })
</script>
</body>
</html>
posted @ 2021-07-11 03:49  King-DA  阅读(23)  评论(0)    收藏  举报