VueJS watch对数据监视用法

running8

于 2020-02-29 17:11:57 发布

阅读量176

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/running8/article/details/104577620

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

 <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>