vue监听事件

本文详细介绍了在Vue.js中如何使用watch监听数据变化,包括监听简单事件、复杂事件以及数组的变化,通过深度监听和直接监听对象属性的方法,实现对组件状态的响应式更新,并展示了设置点击事件改变内容的实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

侦听器/监听器 watch:监听数据变化

一、准备数据和样式

<template>
  <div>
    {{ name }}
    <br>
    {{obj.age}}
    <br>
    {{arr}}
    <button @click="fn">点击</button>
  </div>
</template>
  data() {
    return {
      name: "zs",
      obj:{
        age:18,
        gender:'女'
      },
      arr:[1,2,4]
    }
  },

二、设置监听事件

1、监听简单事件

name(newVal){
  console.log('监听到了' + newVal);
},

2、监听复杂事件

方法一:深度监听

obj:{
  deep:true,//深度监听
  immediate:true,//立即监听
  handler(newVal){
    console.log('监听到了' +newVal.age);
  }
},

方法二:直接监听对象里的属性

'obj.age'(newVal){
  console.log('监听到了' +newVal);
},

3、监听数组

方法一:深度监听

    arr:{
      deep:true,
      handler(newVal){
        console.log('监听到了' +newVal);
      }
    }

方法二:直接监听对象里的属性

    'arr.push(9)'(newVal){
      console.log('监听到了' +newVal);
    },

 

三、设置点击方法改变内容

  methods: {
    fn() {
      this.name = "ls";
      this.obj.age=80
      this.arr.push(9)//数组监听方法不能用
    },
  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值