vue2.0中监听watch的三种写法

本文详细介绍了Vue 2.0中watch方法的三种常见使用方式,包括普通数据监听、数组变化监听和对象深度监听,并通过实例演示了如何在实际项目中应用这些技巧。同时涵盖了对象属性监听和状态管理的场景。

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

vue2.0中监听watch的三种写法

watch:观测Vue实例上的数据变动,对应一个对象。
键:就是需要监测的那个东西,
值:

1.可以是当键变化时执行的函数,有两个参数,第一个是变化后的值,第二个是变化前的值。
2.可以是函数名,得用单引号包裹。
3.可以是一个对象,这个对象有三个选项:

(1)handler :一个回调函数,监听到变化时应该执行的函数。
(2)deep :boolean值,是否深度监听。(一般监听时是不能监听到对象属性值的变化的,数组的变化可以听到)
(3)immediate :boolean值,是否立即执行handler函数。

watch的三种情况:
1、普通的watch:
el:'#app',
    data:{
        meter:1000,
        kilameter:1
    },
    watch:{
        meter:function(val){
            this.kilameter = val * 0.1;
        },
        kilameter:function(val){
            this.meter = val *1000;
        }
    }
})
2、数组的watch:
el:'#app',
    data:{
        arr:[1,2,3]
    },
    watch:{
        arr:function(newV,oldV){
            console.log(newV); 
            console.log(oldV);    
        }
    }
})
3、对象的watch:

写法一:

el:'#app',
    data:{
        obj : {
            a:111,
            b:222
        }  
    },
    watch:{
        obj:{
            handler:function(newV,oldV){
                console.log(oldV);
            },
            deep:true
        }
    }
)

写法二

<el-input :disabled="true" type="textarea" v-model="form.price"></el-input>
显示价格:{{$store.state.editTask.rowData.price}}

 <el-input type="text" v-model="newPrice"></el-input>
<script>
    data(){
        return{
            newPrice: "",  
            timer: null,
            form{
            	id:'',
            	price:''
       		}
        }
    },
  created() {
      // this.$store.state.editTask.rowData = row
    this.form = this.$store.state.editTask.rowData // 当前行数据
  },
  watch: {
    // 对象的监听写法
   'form.price': function (val) { 
   // newPrice(val){ 
      this.showReason = val!== 1
    },
        newPrice(val){
        clearTimeout(this.timer); //防抖
        this.timer = setTimeout(() => {
              /**
              *小数点不好控制,把控不了用户输入后是否继续输入,
              *所以如果输入后1秒内没有再输入则小数点就会被清掉
              */

              let reg = /^(0|[1-9]\d*)(\.\d{1,2})?/;  //只允许输入小数点后2位
              let price = val.match(reg);
              this.newPrice = price ? price[0] : '';
         }, 1000);
    }
  },        
</script>

store定义数据

src/store/modules/editTask.js

const state = {
    rowData:{},//当前行数据
}
引用\[1\]:ps -aux命令是一种常用的进程查看命令。其中,-a选项表示显示所有用户的进程,-u选项表示显示进程的详细信息,-x选项表示显示没有控制终端的进程。而grep命令是一种文本搜索工具,用于在文件中查找指定的字符串。所以,ps -aux | grep命令的作用是通过ps命令查看所有用户的进程,并通过grep命令筛选出包含指定字符串的进程。\[1\] 引用\[2\]:ps -aux命令是用来查看当前系统中所有进程的命令。其中,-a选项表示显示所有用户的进程,-u选项表示显示进程的详细信息,-x选项表示显示没有控制终端的进程。而|符号是管道符号,用于将前一个命令的输出作为后一个命令的输入。grep命令是一种文本搜索工具,用于在文件中查找指定的字符串。所以,ps -aux | grep命令的作用是通过ps命令查看所有用户的进程,并通过grep命令筛选出包含指定字符串的进程。\[2\] 问题:ps -aux |grep命令详解 回答:ps -aux | grep命令是一种常用的进程查看和筛选命令。ps -aux命令用于查看当前系统中所有进程的详细信息,包括进程的用户、进程ID、CPU占用率等。而grep命令则用于在ps命令的输出结果中筛选出包含指定字符串的进程。通过将ps -aux命令的输出结果通过管道符号|传递给grep命令,可以实现对进程的筛选和搜索。这个命令在系统管理和故障排查中经常被使用,可以帮助用户找到特定的进程或者了解系统中的进程情况。 #### 引用[.reference_title] - *1* [linux命令ps aux|grep xxx详解](https://blog.csdn.net/weixin_41789688/article/details/112845439)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [ps -aux | grep 用法详解](https://blog.csdn.net/weixin_36099503/article/details/114909629)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值