current position:Home>watch listener in vue

watch listener in vue

2022-09-23 03:17:16o-h-

1、概念:

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

2、语法格式:

在这里插入图片描述

3、示例

3-1、

一个input输入框,Then the bidirectional bindingv-mdel

在这里插入图片描述

在输入框中输入内容,点开vue的调试工具(Devtools),data中的数据也随之改变,
直接在data中修改数据,inputThe contents of the box will change accordingly

在这里插入图片描述

3-2、

定义watch侦听器,侦听username值的变化

在这里插入图片描述

只要在input框中输入内容,watchThe listener to listen tousernameThe change of data is the console to print out the result

在这里插入图片描述

注意:newVal 和 oldVal 的顺序不能错,newVal 在前面!

3-3、

需求:Determine whether the user name being used

在这里插入图片描述
在这里插入图片描述

3-4、

优化:一进入页面watchThe listener is automatically triggered a
在这里插入图片描述

结果:

在这里插入图片描述
注意:
1.方法格式的侦听器

  • 缺点1:无法在刚进入页面的时候,自动触发.
  • 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器.

2.对象格式的侦听器

  • 好处1:可以通过 immediate 选项,让侦听器自动触发.
  • 好处2:可以通过 deep 选项,让侦听器深度监听对象中每个属性的变化

Preferred way to format the listener,If can't meet the demand to choose object format listener!

3-5、

优化:深度侦听

在这里插入图片描述

结果:

在这里插入图片描述

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue侦听器</title>
</head>
<body>
 
  <div id="app">
     <input type="text" v-model="info.username">
  </div>

  <script src="./libs/vue.js"></script>

  <script> const vm = new Vue({
       el:'#app', data:{
       info:{
       username:'admin' } }, watch:{
       // info:{ //侦听info,只要infoAny attribute changes inside,都会被侦听到 // handler(newVal){
       // console.log(newVal) // }, // // 开启深度监听,只要对象中任何一个属性变化了,都会触发“对象的侦听器” // deep:true // }  //如果要侦听的是对象的子属性的变化,则必须包裹一层单引号 'info.username'(newVal){
       console.log(newVal) } } }) </script>
</body>
</html>

结果:

在这里插入图片描述

copyright notice
author[o-h-],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/266/202209230253444961.html

Random recommended