数据侦听

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,083评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,086评论 0 29
  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,070评论 2 89
  • 不同的国际期货品种波动规律是不一样的,掌握规律,做好几个品种就够了!想做好期货:要学会等待机会,不能频繁操作,手勤...
    小星星2017阅读 294评论 0 2
  • 电影上映前我还是超级爱超级支持,看完后有一种开玩笑的感觉。 ——某粉丝 《爱情公寓》上映前,抄袭的事情闹...
    头大青年阅读 560评论 0 2