VueJS watch对数据监视用法

原创于 2020-02-29 17:11:57 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单应用，通过按钮操作改变温度数值，并根据温度变化判断当前季节，提供了一种直观的温度与季节关联展示方式。

 <div id="app">
        {{ temperature }}<br/>
        {{ season }}<br/>
        <button @click.prevent="Add(5)">+5</button>
        <button @click.prevent="Add(-5)">-5</button>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                temperature:10,
                season:'',
            },
            methods:{
                Add(num){
                    this.temperature += num;
                }
            },
            watch:{
                temperature:function(newVal,oldVal){
                    if(newVal>30){
                        this.season='夏天';
                    }
                    else if(newVal < 10){
                        this.season='大约是冬季';
                    }
                    else{
                        this.season='春秋天吧';
                    }
                }
            }

        })
    </script>