学习笔记(24):Vue2.x从入门到实战-Watch 选项 监控数据

立即学习:https://edu.csdn.net/course/play/6823/135333?utm_source=blogtoedu

watch选项

构造器中的watch选项是用来监听数据。

我们写一个例子，温度大于26度时，我们建议穿短袖短裤，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿羽绒棉衣。

<p>今日温度：{{temperature}}℃</p>
    <p>穿衣建议：{{suggest}}</p>
    <p>
        <button @click="add">升高温度</button>
        <button @click="reduce">降低温度</button>
    </p>

var arrayS=['短袖短裤','夹克长裙','羽绒棉服'];
    var app=new Vue({
        el:'#app',
        data:{
            temperature:4,
            suggest:'夹克长裙'
        },
        methods:{
            add:function () {
                this.temperature+=4;
            },
            reduce:function () {
                this.temperature-=4;
            }
        },
        watch:{
            temperature:function (newVal,oldVal) {
                if(newVal>=26){
                    this.suggest=arrayS[0];
                }else if(newVal<26&&newVal>0){
                    this.suggest=arrayS[1];
                }else{
                    this.suggest=arrayS[2];
                }
            }
        }
    })

还有可以将watch选项用实例方法写在构造器外部

app.$watch('temperature',function(newVal,oldVal){
    if(newVal>=26){
        this.suggest=suggest[0];
    }else if(newVal<26 && newVal >0)
    {
        this.suggest=suggest[1];
    }else{
        this.suggest=suggest[2];
    }

})

新人一枚，若有不足，请指正！