VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • 第六十六篇：Vue的watch侦听器

好家伙，哇吃侦听器

 

1.watch侦听器

 

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

1.1.侦听器的基本用法

复制代码
<body>
    
    <div id="app">
       <input type="text" v-model="username">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  
    <script>
     
        const vm = new Vue({           
            el:'#app',          
            data:{
                username:'ni hao shuai'
            },
            //所有的
            watch:{
                //侦听器本质上是一个函数，要监听哪个数据，就把那个数据作为方法名即可
                username(newVal,oldVal){
                    console.log("username的数值发生变化",newVal,oldVal)
                }
            },
            methods:{                               
             }           
        })
        
    </script>
</body>
复制代码

 

数据的改变可以被侦听到

 

 

2.侦听器的格式

 ( 1 )方法格式的侦听器

　　代码参上

　　缺点1:无法在进入页面时自动触发

　　缺点2:如果监听的是一个对象,若果对象中的属性发生了变化,不会触发侦听器!

 

 ( 2 )对象格式的侦听器

　　好处1:可以通过immediate属性让监听器自动触发

　　好处2:可以通过deep选项,让侦听器深度监听对象中的每个属性

　　代码如下:

复制代码
<body>
    
    <div id="app">
       <input type="text" v-model="username">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  
    <script>
     
        const vm = new Vue({           
            el:'#app',          
            data:{
                username:'ni hao shuai'
            },
            //所有的
            watch:{
                //定义对象格式的侦听器
                username:{
                //用handler属性定义该侦听器的功能
                handler:function(newVal,oldVal){ 
                    console.log(newVal,oldVal)
                },
                immediate:ture
                //immediate属性为布尔值
                //immediate选项的默认值是flase,ture表示立即执行
                
            }
        },
            methods:{                               
             }           
        })

    </script>
</body>
复制代码

 

 

3.深度监听deep

 

通过deep选项,让侦听器深度监听对象中的每个属性

复制代码
<body>
    
    <div id="app">
       
     <input type="text" v-model="info.username">  
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
     
        const vm = new Vue({
            
            el:'#app',
           
            data:{

                info:{
                    username:'admin'
                }
               
            },
            watch:{
                info:{
                    handler(newVal){
                        console.log(newVal)
                    },
                    //开启深度监听,只要对象中任何一个属性变化了,都会触发"对象的侦听器"
                    deep:true
                }
            },
            methods:{
                                
             }
            
        })

    </script>
</body>
复制代码

 

页面如下:

 

 

4.补充:

为了方便,可以直接侦听对象中的子属性

如果要监听的对象是子属性的变化,则必须包裹一层单引号

'info.username'(newVal){

   console.log(newVal)  
    
}

 

 

That's all
 

出处：https://www.cnblogs.com/FatTiger4399/p/16129957.html

相关教程