侦听属性

Posted 2021-03-23 eliwen

<div id="app">
     <button @click="num++">+</button>
     <input :class="{red:than_100,blue:less_100}" type="text" v-model="num">
     <button @click="num--">-</button>

</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num:100,
            than_100:false,
            less_100:false,
        },
        //侦听属性
        // 实时监听属性本身的值是否发生变化
        watch:{
            num(){
                if(this.num<100){
                    this.less_100 = true;
                    this.than_100 = false;
                }else if(this.num>100){
                    this.less_100 = false;
                    this.than_100 = true;
                }
            }
        }

    })

</script>