精华内容
下载资源
问答
  • vue watch的用法
    2021-12-24 17:53:03
    watch 的用法: 
      在Vue 框架中:  data 中保存有数据。 但是在watch 监听器中可以监听data 中的数据, 也可以监听prop 中的数据。
    
    在watch 监听器中监听data 中的数据, 可以写成函数的形式。 
     key(val) {
       if (val) {
         this.iconList = originList.filter(name => name.indexOf(val) > -1)
       } else {
         this.iconList = originList
       }
     }
    
    

    更多相关内容
  • vue watch 使用方法

    千次阅读 2021-11-02 22:19:35
    方法一:直接写一个监听处理函数,每次监听到属性值(如cityName...方法三:使用 immediate(立即)属性和 handler (处理者)方法,deep 深度监测。如果只需要监听对象中的一个属性值,使用字符串形式监听对象属性名。

    目录

    方法一:直接写一个监听处理函数

    方法二:监听数据后面加字符串形式方法名

    方法三:使用 immediate(立即)和 deep 属性及 handler (处理者)方法


    • 方法一:直接写一个监听处理函数,每次监听到属性值(如cityName)变化,执行此函数
    • 方法二:监听数据后面加字符串形式方法名,方法名在 methods 中定义
    • 方法三:使用 immediate(立即)属性和 handler (处理者)方法,deep 深度监测。如果只需要监听对象中的一个属性值,使用字符串形式监听对象属性名
    • watch 特点

    方法一:直接写一个监听处理函数

    • 每次监听到属性值(如cityName)改变时,执行此函数
    <input type="text" v-model="cityName"/>
    
    export default{
      data () {
        return {
          cityName: '上海'
        }  
      },
      watch: {
        cityName(newVal, oldVal){
          this.cityName = newVal
        }
      }
    }
    

    方法二:监听数据后面加字符串形式方法名

    • 方法名在 methods 中定义
    export default{
      data () {
        return {
          cityName: '上海'
        }  
      },
      watch: {
        cityName: 'nameChange'
      },
      methods: {
        nameChange(newVal, oldVal){
          this.cityName = newVal
        }
      }
    }

    方法三:使用 immediate(立即)和 deep 属性及 handler (处理者)方法

    • watch 特点
      • 当值第一次绑定时不会执行监听函数
      • 只有值发生改变时才会执行监听函数
      • 如果需要第一次绑定时执行监听函数,使用 immediate 属性 boolean 类型
    • 使用方法
      • 监听属性后面写成对象形式,包含 handler 方法和 immediate 属性
      • immediate 属性表示 watch 首次绑定时,是否执行 handler 方法
      • immediate 为 true 表示 watch 声明的时候,立即执行 handler 方法
      • immediate 值为 false 则和一般 watch 用法一样,在数据发生变化时才执行 handler 方法
    export default{
      data () {
        return {
          cityName: '上海'
        }  
      },
      watch: {
        cityName: {
          handler(newVal, oldVal){
            this.cityName = newVal
          },
          immediate: true
        }
      }
    }
    

    deep 深度监听

    • 当需要监听一个对象改变时,普通 watch 无法监听到对象内部属性变化
    • 只有 data 中的数据才能够监听到对象内部属性变化
    • watch 中使用 deep 属性,可以对对象中的属性进行深度监听
    <input type="text" v-model="cityName.name"/>
    
    export default{
      data () {
        return {
          cityName: {id: 1, name: '上海'}
        }  
      },
      watch: {
        cityName: {
          handler(newVal, oldVal){
            console.log('newVal', newVal)
            console.log('oldVal', oldVal)
          },
          immediate: true,
          deep: true,
        }
      }
    }
    
    • 设置 deep: true 可以监听到 cityName.name 变化
    • 此时会给 cityName 所有属性都加上这个监听器
    • 当对象属性较多时,每个属性值变化都会执行 handler 方法
    • 如果只需要监听对象中的一个属性值,使用字符串形式监听对象属性名
    export default{
      data () {
        return {
          cityName: {id: 1, name: '上海'}
        }  
      },
      watch: {
        'cityName.name': {
          handler(newVal, oldVal){
            console.log('newVal', newVal)
            console.log('oldVal', oldVal)
          },
          immediate: true,
          deep: true,
        }
      }
    }
    • 数组(一维、多维)变化不需要通过深度监听
    • 对象数组中对象属性变化需要进行深度监听
    • watch 中不要使用箭头函数,因为箭头函数中的 this 是指向当前作用域
    展开全文
  • 主要介绍了Vue数据监听方法watch使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue watch用法

    2021-09-28 16:17:13
    watch监听数据变化并执行代码 1.简单应用 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ ...

    watch监听数据变化并执行代码

    1.简单应用

    <template>
        <div>
            <p>FullName: {{fullName}}</p>
            <p>FirstName: <input type="text" v-model="firstName"></p>
        </div>
    </template>
    
     
    new Vue({
      data: {
        firstName: 'Dawei',
        lastName: 'Lou',
        fullName: ''
      },
      watch: {
        firstName(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        }
      } 
    })

    简单应用2

    <template>
        <div>
            <el-input v-model="demo"></el-input>
            {{value}}
        </div>
    </template>
    <script>
        export default {
            name: 'index',
            data() {
                return {
                    demo: '',
                    value: ''
                };
            },
            watch: {
                demo(val) {
                    this.value = this.demo;
                }
            }
        };
    </script>
    

    简单应用3 配合computed 如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成。

    <template>
      <div>
        <el-input v-model="demo.name"></el-input>
        {{value}}
      </div>
    </template>
    <script>
      export default {
        name: 'index',
        data() {
          return {
            demo: {
              name: ''
            },
            value: ''
          };
        },
        computed: {
          newName() {
            return this.demo.name;
          }
        },
        watch: {
          newName(val) {
            this.value = val;
          }
        }
      };
    </script>

    2.immediate和handler

    当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

    immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

    watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法,如果设置了false,那么效果和上边例子一样
        immediate: true
      }
    }

    3.deep属性(深度监听,常用语对象下面属性的改变)

    <div>
          <p>obj.a: {{obj.a}}</p>
          <p>obj.a: <input type="text" v-model="obj.a"></p>
    </div>
     
    new Vue({
      el: '#root',
      data: {
        obj: {
          a: 123
        }
      },
      watch: {
        obj: {
          handler(newName, oldName) {
             console.log('obj.a changed');
          },
          immediate: true
        }
      } 
    })

    展开全文
  • vuewatch用法

    千次阅读 2022-04-25 10:31:46
    vue项目中需要对某个值进行监听做一些操作的时候我们会用到watch进行监听: 1:监听普通属性: 单一字符串,布尔值,等等 data() { return { dvid: '', goodsInfo: [], userInfo:{}, closeTime...

    当vue项目中需要对某个值进行监听做一些操作的时候我们会用到watch进行监听:

    1:监听普通属性:

    单一字符串,布尔值,等等

    data() {
    			return {
    				dvid: '',
    				goodsInfo: [],
    				userInfo:{},
    				closeTime:0,//关仓倒计时
    			}
    		},
    
    watch:{
    		closeTime(newVal, oldVal){
    			console.log(`${newVal} : ${oldVal}`);
    			}
    		},
    

    注意:watch第一次绑定值的时候不会执行监听,如果需要第一次就执行监听 则需要设置:immediate: true

    watch:{
    		closeTime: {
    				handler (newName, oldName) {
    					console.log(`${newVal} : ${oldVal}`);
    				},
    				immediate: true
    			}
    		}
    

    2:监听对象:

    监听对象需要用到深度监听 设置deep:true

    watch: {
    			closeTime: {
    				handler(newName, oldName) {
    					console.log(`${newVal} : ${oldVal}`);
    				},
    				immediate: true,
    				deep: true
    			}
    		}
    

    可以可以单独监听对象的某个属性 对象.xxx

    监听数组:

    注意:与对象监听一样 区别在于数组不需要深度监听

    tips:watch中不能使用箭头函数 箭头函数this指向为当前作用域

    展开全文
  • Vue 实例将会在实例化时调用 watch,遍历 watch 对象的每一个 属性。 示例: 滴哟 <template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input...
  • Vue 中可以通过 watch 自定义侦听器,来响应数据的变化,支持对 data,props,computed 中的数据进行监听。 基本用法 基本类型监听 data () { return { name: '小黑', age: 300, isSpirit: true } }, ...
  • 主要介绍了vue watch普通监听和深度监听(数组和对象),文中单独通过代码给大家介绍了vue watch 深度监听的方法,感兴趣的朋友一起看看吧
  • vue watch使用场景和方法

    千次阅读 2021-05-30 22:27:09
    侦听器,vue通过watch来提供更通用的方法来响应数据变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 示例: <div id="app"> 千米: <input type="text" v-model=...
  • vuewatch的详细用法

    2021-10-20 18:34:07
    watch一般有三种用法: 1.阉割版(简写) 语法: watch: { 侦听数据: function ( 新数据, 旧数据 ) { ----- 可以在此处进行操作 ------ } } 代码实例: <body> <div id="root"> <h2...
  • vuewatch使用

    千次阅读 2022-04-06 16:37:22
    watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。 基础用法 <template> <div> </div> </template> <script> export default { data(){ ...
  • vue3 watch用法

    千次阅读 2022-04-11 10:22:32
    import { ref, watch } from "vue" import { useRoute } from "vue-router" <script setup> const route = useRoute() const showPage = ref(false) watch( () => route.path, (val) => { if (val =...
  • vue watch 数据监听

    2022-06-14 16:50:12
    vue watch 数据监听
  • vuewatch的几种用法

    2021-08-02 14:39:30
    vue中,使用watch来响应数据的变化。watch用法大致有三种。下面代码是watch的一种简单的用法: 普通用法: new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName)...
  • 主要介绍了vue使用 watch 出现了如下的报错信息的原因分析及解决方法,本文附有代码解决方案,非常不错,需要的朋友可以参考下
  • vue中,使用watch来响应数据的变化。watch用法大致有三种。下面代码是watch的一种简单的用法: ''' <input type=text v-model=cityName/> new Vue({ el: '#root', data: { cityName: 'shanghai' },...
  • 主要介绍了vue.js使用watch监听路由变化的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue watch监听基本使用

    2020-06-11 12:35:28
    使用说明 使用:可以监听模型数据的改变,当绑定到监听上的模型数据改变了 那么监听就可以触发,来完成具体的功能 注意:监听watch在初始化的时候不会执行,只有当数据改变之后才会运行 语法:要和el,data,...
  • vue中,使用watch来响应数据的变化。watch用法大致有三种。下面代码是watch的一种简单的用法: <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, ...
  • vue watch的详细用法

    千次阅读 2019-07-01 14:43:47
    https://www.cnblogs.com/forward-wuyi/p/9627962.html
  • 本篇文章中主要介绍了Vue.js 中的 $watch使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇vue进行图片的预加载watch用法实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 假设有如下代码: ...new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName
  • Vuewatch用法

    2021-03-30 15:59:37
    Vuewatch用法 我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法vue) 具体如下图: vue代码 账户名称:<el-input v-model="qqName" style="width: 10%"></el-input> 账户密码:...
  • vue3 watch用法

    2022-07-29 15:18:02
    watch用法
  • Vuewatch的详解

    2022-07-08 09:58:22
    2.1 watch基础语法 被监听的数据:data中定义的数据; 数据改变后的值:该数据...属性名的写法,用法和简单数据类型一致。2.4 immediate (立即处理 进入页面就触发) 2.5 deep 深度监听 3. watch简写形式 代码如下:..
  • vuewatch用法

    万次阅读 2018-03-28 14:16:19
    在没有使用vue之前,我们可能是通过input的change事件来判断,用户是否输入了内容,然后修改按钮的状态。现在有了vue,就省事了很多,我们只需要在watch中,监听数据模型的值改变即可。 &lt;div id="app...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,919
精华内容 15,167
关键字:

vue watch的用法