9.Vue.js monitor property

This chapter, we will introduce Vue.js monitor property watch, we can respond to changes in data over the watch.

The following examples are implemented through the use of counters watch:

<div ID = "App"> 
    <P style = "font-size: 25px;"> Counter: {{counter}} </ P> 
    <Button @click = " counter ++ " style = "font-size: 25px;" > point I </ Button> 
</ div> 
<Script type = "text / JavaScript"> 
var Vue new new VM = ({ 
    EL: '#app', 
    Data: { 
        counter:. 1 
    } 
}); 
// current Oval value
 VM Watch $ ( 'counter', function (nVal, Oval) {. 
    Alert ( 'change counter value:' '!' + oval + ' becomes' + + nVal); 
}); 
</ Script>

 

The following examples are carried out one thousand meters and meters Conversion of:

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            Val = this.kilometers / 1000; 
            this.meters = Val; 
        } 
    }
    });
    // $ Watch is an instance method
    . Watch $ vm ( 'kilometers', function (newValue, oldValue) {
    // This callback will vm after changing the call .kilometers
    document.getElementById ( "info") innerHTML =before modification values:" + oldValue + ", the value is modified:." + newValue;
})
</ Script>