当前位置：首页 > news >正文

Vue2.0 的漫长学习ing-3-4

news 来源：原创 2024/5/17 18:29:58

Watch 选项监控数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>watch 选项 监控数据</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>watch 选项 监控数据</h1>
    <hr>

    <div id="app">
        <p>今日温度 ：{{wendu}}° </p>
        <p>穿衣建议: {{chuanyi}} </p>
        <button @click="add()">升高温度</button> <button @click="reduce()">降低温度</button>
    </div>

    <script type="text/javascript">
        var chuanyiArr = ['T恤短裤','夹克长衫','棉衣羽绒服'];

        var myapp = new Vue({
            el:'#app',
            data:{
                wendu:10,
                chuanyi:"夹克长衫"
            },
            methods:{
                add:function(){
                    this.wendu += 5;
                },
                reduce:function(){
                    this.wendu -= 5;
                }
            },
            // watch:{
            //     wendu:function(newvalue,oldvalue){
            //         if(newvalue >= 26){
            //             this.chuanyi = chuanyiArr[0];
            //         }
            //         else if(newvalue > 0 && newvalue < 26){
            //             this.chuanyi = chuanyiArr[1];
            //         }
            //         else{
            //             this.chuanyi = chuanyiArr[2];
            //         }
            //     }

            // }
        })
        myapp.$watch('wendu',function(newvalue,oldvalue){
            
                    if(newvalue >= 26){
                        this.chuanyi = chuanyiArr[0];
                    }
                    else if(newvalue > 0 && newvalue < 26){
                        this.chuanyi = chuanyiArr[1];
                    }
                    else{
                        this.chuanyi = chuanyiArr[2];
                    }
                
        });
    </script>
</body>
</html>