二十三、Watch 选项监控数据

原创于 2018-10-28 12:05:53 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Watch

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文通过一个温度变化触发穿衣建议更新的例子，展示了Vue.js中Watch选项的使用方法。当温度改变时，Watch会监听并执行相应的函数，更新推荐的穿着。此示例涉及Vue的数据响应机制，适合初学者理解Vue的组件状态管理和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>