二十三、Watch 选项监控数据

淩亂°似流年 2022-05-03 11:30 153阅读 0赞

#                           Watch 选项 监控数据 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>watch Option 选项</title>
    </head>
    <body>
        <div id="app">
            <p>今日温度：{
       {wendu}}</p>
            <p>穿衣建议：{
       {chuanyi}}</p>
            <p><button @click="shenggao">升高</button></p>
            <p><button @click="jiangdi">降低</button></p>
        </div>
    
        <script type="text/javascript">
            var suggestion=['短袖','中衣','长衣','羽绒服'];
    
            var app=new Vue({
                el:'#app',
                data:{
                    wendu:20,
                    chuanyi:'大衣'
                },
                methods:{
                    shenggao:function () {
                        this.wendu+=5;
                    },
                    jiangdi:function () {
                        this.wendu-=5;
                    }
                },
                watch:{//监控wendu这个值的变化，变化后的值赋予newVal
                    wendu:function(newVal,oldVal) {
                        if (newVal >= 26) {
                            this.chuanyi = suggestion[0];
                        } else if (newVal < 26 && newVal >= 0) {
                            this.chuanyi = suggestion[1];
                        }else if (newVal < 0 && newVal >=-15) {
                            this.chuanyi = suggestion[2];
                        } else {
                            this.chuanyi = suggestion[3];
                        }
                    }
                }
            })
        </script>
    </body>
    </html>