Vue- instance members computed and watch

Computed

A variable dependent on a plurality of variables

Now we need full_name since this variable in first_name and last_name these two variables need to use computed

 

benefit:

1 corresponds to the variable defined in the computed value of the function is equal to bind the return value of the variable is no longer in data declarations

2. All variables are listening in function computed binding, as long as written on the inside will be monitored

 

<div id="app">
    <p>
        姓：<input type="text" v-model="first_name">
        名：<input type="text" v-model="last_name">
    </p>
    <p>
        姓名：<b>{{ full_name }}</b>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        on: ' #app ' ,
        data: {
            first_name:'',
            last_name:'',
            // full_name:'None'
        },
        computed:{
            full_name:function () {
                // let a =this.first_name;
                // let b =this.last_name;
                // console.log('尼玛');
                // return'123'
                return this.first_name+this.last_name
            }
        }
    })
</script>

 

watch

This method is not watch the monitor inside, the rear binding function is to monitor the front of the variable, the variable value is changed, the function is called bind variables must be declared in the data

<div id="app">
    <p>姓名：<input type="text" v-model="full_name"></p>
    <p>
        姓：<b>{{first_name}}</b>
        名：<b>{{last_name}}</b>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        on: ' #app ' ,
        data: {
            full_name:'',
            first_name:'',
            last_name:''
        },
        watch:{
            // 1. The rear binding function is listening in front of the variable, the variable value change, a function is called 
            FULL_NAME: function () {
                let res = this.full_name.split('');
                this.first_name = res[0];
                this.last_name = res[1]

            }
        }
    })
</script>