前端学习日记Vue：watch选项与$watch实例方法

秒速五厘米 2023-06-07 05:52 92阅读 0赞

<!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>  
        <h1>Watch option</h1>  
        <hr>  
        <div id="app">  
            <p>今日温度：\{ \{Temperature\}\}</p>  
            <p>穿衣建议:\{ \{this.suggestion\}\}</p>  
            <p>  
                <button @click="add">添加温度</button>  
                <button @click="reduce">减少温度</button>  
            </p>  
        </div>  
        <script type="text/javascript">  
            var suggestion = \['T恤短袖', '夹克长裙', '棉衣羽绒服'\];  
            var app = new Vue(\{  
                el: '\#app',  
                data: \{  
                    temperature: 14,  
                    suggestion: 'T恤短袖'  
                \},  
                methods: \{  
                    add: function() \{  
                        this.temperature += 5;  
                    \},  
                    reduce: function() \{  
                        this.temperature -= 5;  
                    \}  
                \},  
                computed: \{  
                    Temperature: function() \{  
                        return this.temperature + "°C";  
                    \}  
                \},  
                // watch: \{  
                //     temperature: function(newVal, oldVal) \{  
                //         if (newVal >= 26) \{  
                //             this.suggestion = suggestion\[0\];  
                //         \} else if (newVal < 26 && newVal >= 0) \{  
                //             this.suggestion = suggestion\[1\];  
                //         \} else \{  
                //             this.suggestion = suggestion\[2\];  
                //         \}  
                //     \}  
                // \}  
            \})  
            app.$watch('temperature', function(newVal, oldVal) \{  
                if (newVal >= 26) \{  
                    this.suggestion = suggestion\[0\];  
                \} else if (newVal < 26 && newVal >= 0) \{  
                    this.suggestion = suggestion\[1\];  
                \} else \{  
                    this.suggestion = suggestion\[2\];  
                \}  
            \})  
        </script>

</body>

</html>