vue篇:watch

vue watch

1.说明

在vue中watch里面,可以配置监听具体某个值的变化,可传参数:
{ [key: string]: string | Function | Object | Array }
在vue官网中对其描述:
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性

2.使用

简单的使用

<template>
	<view>
		<input type="text" v-model="name"/>
	</view>
</template>

<script>
export default {
		data() {
			return {
				name: "小宝",
			}
		},
		watch:{
			name(newName,oldName){
				console.log("newName=>"+newName);
				console.log("oldName=>"+oldName);
			}
		}
};
</script>

上面例子使用 v-model 进行双向绑定
input元素改变值时,就会触发 watch 里面的 name 方法,而这 name 方法就是自己在data方法区定义的数据。当然这是比较常用的使用方式,在官网还有其他使用方式:

{
    // 方法名
    name: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
    name: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    name: {
      handler: 'someMethod',
      immediate: true
    },
    name: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ]
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值