数据侦听

2018-08-19  本文已影响0人  九尾的日志

Computed侦听多个数据变化,Watch只能侦听data里单个数据变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数据侦听</title>
        <script src="vue.js"></script>
    </head>
    <body>
        
        <!-- 监控购物车数据变化 -->
        
        <div id="app">
             
            <input type="number" v-model="price" />
            
            <input type="number" v-model="number" />
            
            <p>{{'总计:'+total}}</p> 
            
        </div>
        
        
        <!-- computed侦听多个数据变化,watch只能侦听data里单个数据变化 -->
        
        <script>
            
            var vm = new Vue({
                
                el:'#app',
                
                data:{
                    price:18,
                    number:6
                },
                
                computed:{
                    
                    total:function(){
                        
                        return this.price*this.number
                    }
                },
                
                watch:{
                    
                    price:function(val,oldval){
                        
                        console.log(val)
                    }
                }
            })
            
            
        </script>
        
    </body>
</html>

上一篇下一篇

猜你喜欢

热点阅读